角度ui路由器的第一个状态为`name：“”

debugcn 发表于 Dev

马克·伯格

我是Angle的新手，正在尝试使用angular ui路由器。当我导航到时，/我得到这个抽象状态$state.current：Object {name: "", url: "^", views: null, abstract: true}。无论如何，这样我的当前状态是files？这是我的代码：

(function() {
    'use strict';

    angular.module('carton', [
        'ui.router',
        'carton.controllers',
        'carton.services',
        'carton.directives'
    ]).
    config([
        '$stateProvider',
        '$urlRouterProvider',
        function(
            $stateProvider,
            $urlRouterProvider
        ) {
            $urlRouterProvider.otherwise('/');
            $stateProvider.
            state('files', {
                url: '/',
                templateUrl: 'partials/files.html',
                //controller: 'FilesCtrl'
                access: {
                    isFree: false
                }
            }).

            state('login', {
                url: '/login',
                templateUrl: 'partials/login.html',
                controller: 'loginCtrl',
                access: {
                    isFree: true
                }
            }).

            state('register', {
                url: '/register',
                templateUrl: 'partials/register.html',
                //controller: 'RegisterCtrl'
                access: {
                    isFree: true
                }
            });

        }
    ])

    .run(['$rootScope', '$state', 'UserService',
        function($root, $state, userSrv) {
            $root.$on(
                '$locationChangeSuccess',
                function(event) {
                    console.log($state.current);
                    if (!$state.current.access.isFree && !userSrv.isLogged) {
                        $state.go('login');
                    }
                }
            )
        }
    ]);
})();

拉迪姆·科勒

我创建了一个plunker，应该显示如何操作。下文描述了该解决方案的2个主要部分。

我们可以在状态定义上使用一些特殊的设置，但是必须将它们嵌套在data对象中。请参阅：

将自定义数据附加到状态对象

调整后的state清晰度为：

state('files', { 
  ...
  data: {           // here we do nest the custom setting into "data"
    access: {
      isFree: false
    }
  }
})

.state('login', {
  ...
  data: {
    access: {
      isFree: true
    }
  }
})

而且，更适合event聆听$rootScope.$on('$stateChangeStart', ..。这是一个示例如何执行此操作：

这可能是我们的案例中的实现：

.run(['$rootScope', '$state', 'UserService',
    function($root, $state, userSrv) {

      $root.$on('$stateChangeStart', function(event, toState
                           , toParams, fromState, fromParams) {

        var isLoginState = toState.name === "login";
        if (isLoginState) {
          return;
        }

        var shouldRequireLogin = !userSrv.isLogged
                    && !toState.data.access.isFree;
        if (shouldRequireLogin) {

          event.preventDefault()
          $state.go('login');
        }
      })
    }
])