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

我的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

。相反，您应该将配置文件数据移动到服务，并将其注入控制器和oneter函数（根据需要）。通过将配置文件数据分离到服务中，您现在也可以从其他任何地方访问它：）

例如：

.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\u name

在resolve内部，您还需要注入服务，并运行load函数返回相关的承诺（以便resolve实际工作）

---

在不了解您的需求的情况下，很难描述实现这一点的最佳方法，但总而言之，您应该将您的配置文件数据拉入其自己的服务中，并在需要时注入它。服务还应封装在服务数据加载后解决的任何承诺。

谢谢。关于我的需求，我目前在控制器中有一个模式框，例如：.

state（'profile.social.create'，{url:'/create'，controller:function（$modal）{\\modal code}）；

唯一的问题是，当点击链接时，模板需要一些时间才能加载，所以我决定将模式代码移动到

onEnter

method。如果有帮助的话，您也可以将模板预加载到模板缓存中（在初始加载时）。是的。谢谢您的回答和评论。模板缓存使模板加载速度更快

.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';
}