我有一个状态,其中声明了多个 View ,如下所示:
$stateProvider
.state('home.details.item', {
url: '^/details',
views: {
'chartsView': {
templateUrl: 'charts.html',
controller: 'chartsCtrl'
},
'gridView': {
templateUrl: 'grid.html',
controller: 'gridCtrl'
},
'detailsView': {
templateUrl: 'details.html',
controller: 'detailsCtrl'
}
}
});
我需要重新加载其中一个 View ,而不重新加载整个状态,不使用 $state.go($state.current,null , {reload: true})
,如果可能的话,从chartCtrl
重新加载 detailsCtrl
。这可能吗?
最佳答案
我想说,UI-Router
解决方案应该围绕 *states*
构建,而不是围绕 View 构建。
(我创建了 working example here )。换句话说,如果有
- 一些不应不重新加载的 View
- 一些其他 View ,应该重新加载
...它需要状态嵌套。让我们将该 View 移至子状态:
.state('home.details.item', {
url: '^/details',
views: {
'chartsView': {
templateUrl: 'tpl.charts.html',
controller: 'chartsCtrl'
},
'gridView': {
templateUrl: 'tpl.grid.html',
controller: 'gridCtrl'
},
// 'detailsView': {
// templateUrl: 'details.html',
// controller: 'detailsCtrl'
// }
}
})
.state('home.details.item.more', {
views: {
'detailsView@home.details': {
templateUrl: 'tpl.details.html',
controller: 'detailsCtrl'
}
}
})
我们还需要一个状态来重新加载。我们可以使用其他方式,例如在状态 more
中更改一些参数,但这意味着每次调用时都会更改参数值。有了这个特殊的状态,我们可以轻松地重新加载我们的状态'more'
:
.state('reload', {
parent: "home.details.item",
views: {
'detailsView@home.details': {
// this controller will just redirect to 'more' and make it fresh...
controller: ['$state', function($state) { $state.go('^.more')}],
}
}
})
通过这些简单的 Controller ,我们可以完成所有需要的事情:
.controller('chartsCtrl', function ($scope, $state) {
var childName = ".more";
$state.go(childName); // default is a sub state 'more'
})
.controller('detailsCtrl', function ($scope) {
$scope.when = Date.now();
})
有了这个:我们可以调用它来重新加载详细信息:
<a ui-sref="reload">force reload detail view</a>
现在,当导航到重新加载时,我们将被重定向到“更多”状态,并且我们的 View 将被重新渲染。
摘要:
一般来说,UI-Router代表状态机。我强烈建议:
Do not worry to think in
states
.Views
are just their representation in the DOM.
如果有一些相关的特征,它们很可能代表状态。如果其他人不相关(应该经常或很少改变),他们就属于其他状态。它可以是 parent 、 child 或 sibling ......
检查一下here
关于javascript - 如何在 AngularJS 中重新加载 subview 而不重新加载整个状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27628264/