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

时间:2016-03-25 15:03:48

标签: angularjs angular-ui-router

在ui-router中给出以下状态:

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

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

但问题是,授权角色列表可能会根据以下值更改:viewType。我以为我可以让数据:{}成为一个函数,注入$ stateParams,并处理那里的逻辑......但是这样做不会。

所以,我尝试使用params对象,但是在$ stateChangeStart时间,还没有从$ state.params或$ stateParams访问:viewType。

通过开发工具,我注意到$ state.transitionTo.arguments被填充了,但是走这条路似乎非常hacky。

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

有什么建议吗?

1 个答案:

答案 0 :(得分:0)

我的建议是使用resolve为您的控制器提供该州自定义的内容或数据。 resolve是一个可选的依赖关系图,应该注入控制器。

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

例如:

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

profileService代码:

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;
        }
    };
});

将使用此服务的控制器代码为:

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


    $scope.skillRecommendation = ProfileService.get_skillRecommendation();

在实例化控制器之前,必须解决下面的解决方案(通过deferred.resolve(),如果它们是一个promise)。注意每个解析对象如何作为参数注入控制器。

使用此代码,只有在承诺得到解决后才会显示该页面。

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