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

Question

所以我有一个 ui-router 状态，如下所示:

父状态

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

子状态

.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

正确的做法是不要尝试从 Controller 外部访问 Controller $scope。相反，您应该将配置文件数据移动到服务中，并将其注入(inject) Controller 和 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)，以便可以更改配置文件 key 本身。因此，在您的 View 中，您需要像这样引用您的个人资料:state.profile.first_name。

此外，在您的解析中，您还需要注入(inject)服务，并运行返回关联 promise 的加载函数(以便解析真正起作用)。

在不了解您的要求的情况下，很难描述执行此操作的最佳方法，但总而言之，您应该将您的个人资料数据提取到其自己的服务中，并在需要时注入(inject)它。服务还应该封装服务数据加载后解析的任何 promise 。