如何在ui路由器的子狀態的onEnter方法中訪問和更新父狀態的解析數據

Question

所以我有一個ui路由器狀態，如下所示：

父州

 $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方法中不可用， 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 。

同樣，在您的解決方案內部，您還需要注入服務，並運行返回關聯的Promise的load函數（這樣，解決方案才能真正起作用）。

在不了解您的需求的情況下，很難描述執行此操作的最佳方法，但是總而言之，您應該將個人資料數據放入其自己的服務中，並在需要時將其注入。 該服務還應該封裝一旦加載了服務數據即可解析的所有promise。