![](/img/trans.png)
[英]Angular UI-Router - Component - Parent - Child - Nested - View not load
[英]Want to update parent view values from Child View using UI-Router
我是AngularJS的新手,我在SPA中使用Angular UI-Router。
我想做的是從子視圖中更新父視圖值。 我已經遍歷了嵌套視圖和多視圖的UI-Router文檔,但是找不到更新值的方法。
我的用例是,父視圖將成為頁眉,並且每次子視圖通過狀態轉換更改時,我都想更新作為父視圖一部分的標頭值。
代碼:
HTML檔案-
<div ui-view></div>
進行Angular UI路由配置的JS文件-
angular.module('myApp', ['ui.router']).config(['$stateProvider', '$routeProvider',
function($stateProvider, $routeProvider) {
$stateProvider
.state('main', {
resolve: {
resA: function() {
return {
'value': 'Hello !!'
};
}
},
controller: function($scope, resA) {
$scope.resA = resA.value;
},
abstract: true,
url: '/main',
template: '<h1>{{resA}}</h1>' +
'<div ui-view></div>'
})
.state('main.one', {
url: '/one',
views: {
'@main': {
template: "Im View One"
}
},
resolve: {
resB: function(resA) {
return {
'value': resA.value + ' from One'
};
}
},
controller: function($scope, resA, resB) {
$scope.resA = resB.value;
}
}).state('main.two', {
url: '/two',
views: {
'@main': {
template: '<div ui-view="sub1"></div>' +
'<div ui-view="sub2"></div>'
},
'sub1@main.two': {
template: "Am awesome"
},
'sub2@main.two': {
template: "Am awesome two/too"
}
},
resolve: {
resC: function(resA) {
return {
'value': resA.value + ' from Two'
};
}
},
controller: function($scope, resA, resC) {
$scope.resA = resC.value;
}
});
}]).run(['$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$state.transitionTo('main.two');
}]);
這是相同代碼段的JSFiddle鏈接 。
您可以通過多種方式更新父范圍。
使用控制器如https://jsfiddle.net/9n7wrevt/17/
controller: function($scope, resA) { this.resA = resA.value; }, controllerAs: 'main'
推薦父母如下
控制器:function($ scope,resB){$ scope.main.resA = resB.value; }
使用$ parent https://jsfiddle.net/9n7wrevt/18/
控制器:function($ scope,resB){$ scope。$ parent.resA = resB.value; }
更好的方法(強烈建議)是使用$ scope $ emit,$ on在控制器之間進行通信。 https://jsfiddle.net/9n7wrevt/19/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.