javascript - Angular ui 路由器的第一个状态为 `name: "“`

Question

我是 Angular 新手，我正在尝试使用 Angular ui 路由器。当我导航到 / 时，我得到这个抽象状态作为我的 $state.current: Object {name: "", url: "^", views: null ，摘要: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');
                    }
                }
            )
        }
    ]);
})();

Answer 1

我创建了一个plunker ，其中应该显示如何操作。该解决方案有两个主要部分如下所述。

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

Attach Custom Data to State Objects

调整后的状态 def 为:

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

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

此外，更适合监听的事件是$rootScope.$on('$stateChangeStart', ..。这里是如何做到这一点的示例:

• Angular UI Router: nested states for home to differentiate logged in and logged out
• 和一个plunker为此

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

.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');
        }
      })
    }
])

有一个working example (注册和登录始终可用，文件仅在登录时使用)