AngularJS UI-Router 从 State 的数据对象访问 $stateParams

Question

给定 ui-router 中的以下状态:

.state('some.state', {
    url: '/some/:viewType',
    templateUrl: 'myTemplate.html',
    controller: 'SomeStateController',
    controllerAs: 'vm',
    data: {
        authorizedFor: [SOME_ROLE]
    }
}

我正在尝试使用状态的“数据”对象来帮助控制对授权状态的访问。另外，我处理 $stateChangeStart 事件以查看 data.authorizedFor 并采取相应措施。

但是，问题是授权 Angular 色列表可能会根据 :viewType 的值而改变。我以为我可以让 data:{} 成为一个函数，注入(inject) $stateParams，然后处理那里的逻辑……但这不行。

因此，我尝试改用 params 对象，但在 $stateChangeStart 时间，还不能从 $state.params 或 $stateParams 访问 :viewType。

在开发工具中逐步进行时，我注意到 $state.transitionTo.arguments 已填充，但走这条路似乎非常糟糕。

params: {
    authorizedFor: function($state) {
        console.log($state.transitionTo.arguments[1].viewType); // has value I need
    }
}

有什么建议么？

Answer 1

我的建议是使用 resolve为您的 Controller 提供该州自定义的内容或数据。 resolve 是一个可选的依赖关系映射，应该注入(inject)到 Controller 中。

如果这些依赖项中的任何一个是 promise ，它们将在 Controller 被实例化并触发 $stateChangeSuccess 事件之前被解析并转换为一个值。

例如:

$stateProvider
        .state('profile', {
            url: '/profile',
            templateUrl: 'profile.html',
            resolve:{
                'ProfileService': function(ProfileService){
                    return ProfileService.promise_skillRecommendation_mock;
                }
            }
        })

profile服务代码:

var app = angular.module('app').service("ProfileService", function($http){
    var myData = null;

    var promise_skillRecommendation_mock =
        $http.get('Mock/skillRecommendation-mock.json')
            .success(function(data){
                myData = data;
            });
    return{
        promise_skillRecommendation_mock: promise_skillRecommendation_mock,
        get_skillRecommendation: function(){
            return myData;
        }
    };
});

并且将使用此服务的 Controller 代码是:

angular.module('app').controller('ProfileController', function($scope, $http, ProfileService){


    $scope.skillRecommendation = ProfileService.get_skillRecommendation();

在实例化 Controller 之前，必须解析下面解析中的对象(如果它们是 promise ，则通过 deferred.resolve())。注意每个解析对象是如何作为参数注入(inject) Controller 的。

通过使用此代码，只有在 promise 被解析后才会显示页面。

欲了解更多信息，请查看此页面:https://github.com/angular-ui/ui-router/wiki