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

Question

我正在使用 ui-router with Material Design's tabs in order to load tab content dynamically in an 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

已更新

如果每个选项卡的数据不同，我们必须做出选择。

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

第一种情况意味着所有州都具有相同的 parent。此 parent 声明 Model = {}。每个 sub-state 以后都可以访问此模型并添加或使用数据

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

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

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

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

原始部分

如果所有州的数据相同，最合适的方法（我会说） 和 UI-Router, 是

介绍一种常见的parent状态，
在parent中使用resolve（只会执行一次）
继承它，所有children都可以得到这样的数据：

勾选这个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 and the working plunker

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

Initialize data only once with ui-router and md-tabs

angularjs

ng-grid

angular-ui-router

material-design