Angular ui-router：添加templateUrl中断路由

I am having an issue where once the templateUrl is added into the ui-router child state, the application will no longer perform the routing to the state. It works fine when it's just a template.

我遇到的问题是,一旦将templateUrl添加到ui-router子状态,应用程序将不再执行到该状态的路由。当它只是一个模板时它工作正常。

app.js:

app.config(['$stateProvider', '$locationProvider', '$urlMatcherFactoryProvider', '$urlRouterProvider',
    function ($stateProvider, $locationProvider, $urlMatcherFactoryProvider, $urlRouterProvider) {

        $urlMatcherFactoryProvider.caseInsensitive(true);
        $urlMatcherFactoryProvider.strictMode(false);

        $urlRouterProvider.otherwise('/page-not-found');

        $stateProvider
                .state('dashboard', {
                    url: '/',
                    views: {
                        'header': {
                            template: 'header'
                        },
                        'nav': {
                            template: 'nav'
                        },
                        main: {
                            template: 'You are on the homepage'
                        }
                    }
                });

        $locationProvider.html5Mode(true);
    }]);

app.run(['$rootScope', 'userService', '$state', function ($rootScope, user, $state) {

    $rootScope.$on("$stateChangeError", console.log.bind(console));

    if (!user.exists) {
        $state.go('user.reg');
    }
}]);

User.states.js:

.config(['$stateProvider', function ($stateProvider) {

    $stateProvider
            .state('user', {
                url: '/users',
                abstract: true,
                views: {
                    'header': {},
                    'nav': {},
                    'main': {
                        template: '<ui-view/>'
                    }
                }
            })
            .state('user.reg', {
                url: '/register',
                //template: 'This will show fine',
                templateUrl: '/app/Users/User.login.html' // this will break
            });

}]);

UPDATE

If I add a ui-sref="user.reg" to my initial pages I can navigate to the state/page fine, with the templateUrl and template . So its just an issue when I try to use state.go('user.reg');

如果我将ui-sref =“user.reg”添加到我的初始页面,我可以使用templateUrl和模板导航到状态/页面。所以当我尝试使用state.go('user.reg')时它只是一个问题;

This means a work around is using the $location provider to change the path. Has the same effect but does seem rather wrong

这意味着解决方法是使用$ location提供程序来更改路径。有相同的效果,但似乎相当错误

1 个解决方案

#1

The problem is with your relative paths.

问题出在你的相对路径上。

Look at this code:

看看这段代码:

$locationProvider.html5Mode(true);

You have html5 mode enabled, and for that to work, you have your base ref set in your html, which probably looks like this:

你启用了html5模式,为了实现这一点,你的html中有你的基础引用设置,可能看起来像这样:

<base href="/">

Your issue is likely that the route for your template isn't "yoursite.com/app/Users/User.login.html."

您的问题很可能是模板的路径不是“yoursite.com/app/Users/User.login.html”。

See this Plunker for a working version of your code. Then go into the html code and uncomment out the base tag, and notice that it will break.

请参阅此Plunker以获取代码的工作版本。然后进入html代码并取消注释基本标记,并注意它将中断。

#1