所以我有一个 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';
}
这可行,但我想知道是否有更好的方法?
最佳答案
正确的做法是不要尝试从 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 。
关于javascript - 如何在 ui 路由器的子状态的 onEnter 方法内访问和更新父状态的解析数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32184505/