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

2023年11月10日 384次阅读

我正在使用
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

点赞