我正在使用
ui-router和
Material Design’s tabs,以便在
ngGrid中动态加载选项卡内容.
每个视图都有独立的控制器和一个请求数据的服务.关于如何配置ui-router只为每个标签初始化一次数据的任何想法?
目前,每次单击选项卡时,都会触发新请求并重新初始化ngGrid.
ng-router配置文件,以防万一:
$stateProvider
.state('tab1', {
url: '/tab1',
views: {
'tab1': {
templateUrl: 'tab1.html',
controller: 'tab1Controller'
}
}
})
.state('tab2', {
url: '/tab2',
views: {
'tab2': {
templateUrl: 'tab2.html',
controller: 'tab2Controller'
}
}
})
.state('tab3', {
url: '/tab3',
views: {
'tab3': {
templateUrl: 'tab3.html',
controller: 'tab3Controller'
}
}
});
最佳答案 更新
如果每个选项卡的数据不同,我们必须选择.
>使用继承(视图继承),
>使用服务
第一种情况是,所有州都有相同的父母.此父级声明Model = {}.每个子状态以后都可以访问此模型并添加或使用数据
var data = Model.DataForTab1;
if(!data){
data = loadData();
Model.DataForTab1 = data;
}
下次,我们来到这个标签,我们可以重用现有的,在父$scope范围内引用的数据模型
第二种方法是在每个数据加载的特殊服务中使用缓存.这样的服务将具有几乎相同的逻辑(返回加载的缓存数据或加载它们)
区别?服务将有更长的使用寿命(通过整个应用程序).制表符的父节点将保持数据JUST直到我们转到另一个父节点状态.
原始部分
如果所有状态的数据相同,那么使用UI-Router的最合适的方式(我会说)是
>介绍一个共同的父国,
>在父母中使用resolve(将只执行一次)
>继承它,所有孩子都可以得到这样的数据:
检查这个Q & A
// virtual parent 'root'
$stateProvider
.state('root', {
abstract: true,
template: '<div ui-view></div>',
resolve: {objectX : function() { return {x : 'x', y : 'y'};}},
controller: 'rootController',
})
// each state will declare parent state
// but its name and url is not effected
.state('tab1', {
parent: "root",
url: '/tab1',
查看更多here和working plunker