Question

好吧，我有plunkr试图模拟我的情况：

我有 3个标签，其想法是用户在文本框中键入单词，单击按钮时，角度服务会返回答案（结果）根据文本框中键入的数据库（我已经模拟了这个过程，请求将数据发送到json文件，所以无论你键入什么都不重要，总是会返回整个数据）并在另一个视图中填充一个表。

我的目标是什么？好吧，我需要保留每个选项卡上的每个视图。换句话说，当用户单击选项卡（更改状态）并返回到另一个选项卡时，请求的数据可能存在（以及搜索框中键入的内容）。

修改

我有一个包含我的定义的数组：

var parentStates = [
      {state : 'tab1', url: '/tab1/', template: 'tab1.html', s: false, d: true},
      {state : 'tab2', url: '/tab2/', template: 'tab2.html', s: false, d: true},
      {state : 'tab3', url: '/tab3/', template: 'tab3.html', s: false, d: true},
      {state : 'tab1.table', url: '', template: 'table.html', s: true, d: false},
      {state : 'tab2.table', url: '', template: 'table.html', s: true, d: false},
      {state : 'tab3.table', url: '', template: 'table.html', s: true, d: false}
    ];

我以这种方式用dinamycally定义我的状态：

parentStates.forEach(function(childName){
        $stateProvider
          .state("home." + childName.state, {
            controller: "itemController", resolve: { $title: function() { return childName.state; } },
            url: childName.url,
            templateUrl: childName.template,
            sticky: childName.s,
            deepStateRedirect: childName.d
          })
      });

仅将粘性应用于状态home.tab*.table。这有效，但不是那么受人尊敬。例如，我在搜索框中键入的内容，当我更改选项卡时dessapear。我需要每个标签可以保留3个数组（如下所述）的内容。这是我的问题。

我有3个阵列：

$scope.Model.items;
$scope.Model.filteredlist;
$scope.Model.expenses;

我使用一个名为$scope.clear_arrays的函数来清除数组上的数据（甚至在$stateChangeSuccess上）。我不知道这是否可以得到我想要的东西。

我知道我必须使用优秀的angular-ui-router-extras (sticky states)库，但我不知道如何在我的情况下应用它。我尝试过：

sticky: true,
deepStateRedirect: true,

但不起作用。一些想法，一些帮助？

编辑：

正如docs所说，我完全需要这一部分：

...切换到其他选项卡之一时，不会退出应用程序中选项卡的状态。用户应该能够在标签之间来回切换，而不会中断他们的工作流程。

Answer 1

使用ui-router-extra的粘性状态时，需要记住一些设计决策：

为每个州使用命名视图，并在这些状态变为活动状态时隐藏/显示它们。这使得如果你考虑一下......如果我们完全从DOM中删除那些视图，那么你的应用程序部分的状态就会消失（例如，想想部分类型的输入框）。这是一个例子：

<div ng-show="$state.includes('main.tab1')" ui-view="tab1"></div>
为标签使用共享控制器。由于粘性状态的性质，为了共享一个状态，它是最好的（也是迄今为止我发现的唯一方法）。这一步非常简单，只是不要将控制器分配给你的子州，你应该好好去。

下面是一个利用上述步骤的简单状态定义，包括父路由，无控制器子和粘滞状态：

$stateProvider
.state('main', {
  url: '/',
  controller: 'MainCtrl',
  controllerAs: 'main',
  templateUrl: 'state-main.html'
})
.state('main.tab1', {
  url: '/tab1',
  sticky: true,
  views: {
    tab1: {
      templateUrl: 'state-tab1.html',
    }
  }
})

这是一个使用粘性状态的非常简单的示例： http://plnkr.co/edit/SCHExh4DYKFd9Kq3UbaA

对于你的应用程序，我应用了上面列出的原则并删除了表子状态，因为这些使事情变得复杂。因此，为了简化，我冒昧地将表包装在一个指令中，并将数据从父作用域传递给它。

该指令的使用变得非常简单（可以更自由地重命名）：

<table-list ng-if="Model.tab1.length > 0" list="Model.tab1" />

请记住Model.tab1包含tab1状态的元素数组（记住共享控制器）。

最后，这是您的应用使用粘性状态：http://plnkr.co/edit/gLn19DMyKBTwZRMpv6Fo

我希望这会有所帮助：）

Angular Ui-Router-Extras |试图实现粘性状态，但不起作用

1 个答案: