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

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;
}

下一次，我们来到这个选项卡，我们可以重用现有的，在父 $scope 引用的数据Model

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

区别？服务将有更长的生命周期（通过整个应用程序）。选项卡的父级将保留数据，直到我们进入另一个父级状态。

原创部分

如果所有州的数据相同，使用 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