Question

我遇到的问题是，一旦将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
            });

}]);

更新

如果我在初始页面中添加ui-sref="user.reg"，我可以使用templateUrl和template导航到状态/页面。因此，当我尝试使用state.go('user.reg');

时，这只是一个问题

这意味着解决方法是使用$location提供程序来更改路径。具有相同的效果，但看起来确实是错误的

Answer 1

问题在于您的相对路径。

看看这段代码：

$locationProvider.html5Mode(true);

你启用了html5模式，为了实现这一点，你的html中有你的基础参考设置，这可能是这样的：

<base href="/">

您的问题很可能是模板的路线不是＆＃34; yoursite.com/app/Users/User.login.html。＆＃34;

See this Plunker代码的工作版本。然后进入html代码并取消注释基本标记，并注意它将会中断。

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

1 个答案: