如何在ui路由器的子状态的onEnter方法中访问和更新父状态的解析数据

Question

我的ui-router状态是这样的:

<<p> 父状态/strong>

 $stateProvider
        .state('profile',{
            url: '/profile',
            views: {
                'contentFullRow': {
                    templateUrl: 'ng/templates/profile/partials/profile-heading-one.html',
                    controller: function($scope, profile,misc){
                        $scope.profile  = profile;
                        $scope.misc     = misc;
                    }
                },
                'contentLeft': {
                    templateUrl: 'ng/templates/profile/partials/profile-body-one.html',
                    controller: function($scope, profile,misc){
                        $scope.profile = profile;
                        $scope.misc     = misc;
                    }
                },
                'sidebarRight': {
                    templateUrl: 'ng/templates/profile/partials/todo-list-one.html',
                    controller: function($scope, profile,misc){
                        $scope.profile = profile;
                        $scope.misc     = misc;
                    }
                }
            },
            resolve: {
                profile: function($http){
                    return $http({method: 'GET', url: '/profile'})
                        .then (function (response) {
                        console.log(response.data)
                        return response.data;
                    });
                },
                misc: function($http){
                    return $http({method: 'GET', url: '/json/misc'})
                        .then (function (response) {
                        console.log(response.data)
                        return response.data;
                    });
                }
            }
        })

<<p> 孩子状态/strong>

.state('profile.social', {
    url: '/social',
    controller:function($scope, profile, misc){
        $scope.profile = profile;
        $scope.misc = misc;
    },
    template: '<div ui-view></div>'
})
.state('profile.social.create',{
        url: '/create',
        onEnter: function($state){
          //Will call a modal here...
          //How do I access or update `$scope.profile` 
          //so far am doing this and it works 
          $state.$current.locals.globals.profile.first_name = 'My New name';
          //Is there any better way of doing this?
        }
})  

由于$scope在onEnter方法中不可用，我如何访问或更新$scope.profile

到目前为止，我所做的是:

onEnter: function($state){
    $state.$current.locals.globals.profile.first_name = 'My New name';
}

这工作，但我想知道是否有更好的方法做到这一点?

Answer 1

正确的做法是不要尝试从控制器外部访问控制器$scope。相反，您应该将配置文件数据移动到服务中，并将其注入控制器和onEnter函数(根据需要)。通过将配置文件数据分离到一个服务中，您现在也可以从其他任何地方访问它:)

例如:

.service('ProfileService', function(){
    var state = {};
    this.loadProfile = function(){
        return $http({method: 'GET', url: '/profile'})
            .then (function (response) {
                console.log(response.data);
                state.profile = response.data;
                return state.profile;
            });
    };
    this.getState = function(){
        return state;
    };
});
// the controller
controller: function($scope, ProfileService){
    $scope.state = ProfileService.getState();
}
// on enter
onEnter: function($state, ProfileService){
    var state = ProfileService.getState();
    state.profile.first_name = 'New Name';
}

我将概要数据包装在容器(state)中，以便概要密钥本身可以更改。所以在你的视图中，你需要像这样引用你的配置文件:state.profile.first_name .

同样在你的resolve中，你还需要注入服务，并运行load函数返回相关的承诺(以便resolve实际工作)。

在不知道自己的需求的情况下，很难描述最好的方法，但总的来说，您应该将配置文件数据拉入自己的服务中，并在需要时注入它。