Question

我正在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' } } });

Answer 1

已更新

如果每个标签的数据不同，我们必须选择。

使用继承（视图继承），
使用服务

第一种情况意味着所有州都拥有相同的父母。这个父母声明Model = {}。每个子状态以后都可以访问此模型并添加或使用数据

var data = Model.DataForTab1;
if(!data){
  data = loadData();
  Model.DataForTab1 = data;
}

下次，我们来到这个标签，我们可以重用现有的，在父范围内引用的数据Model

第二种方法是在特殊services内为每个数据加载使用缓存。这样的服务将具有几乎相同的逻辑（返回加载的缓存数据或加载它们）

差？服务将有更长的使用寿命（通过整个应用程序）。制表符的父级将保持数据JUST直到我们转到另一个父级状态。

ORIGINAL部分

如果所有州的数据相同，那么（我想说）与UI-Router最合适的方式是

介绍一个常见的parent州，
在该父级中使用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

使用ui-router和md-tabs仅初始化数据一次

1 个答案: