3

好吧，我有这个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}
    ];

我以这种方式动态地定义我的状态：

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。这有效，但不像预期的那样。例如，我在搜索框中输入的内容，当我更改选项卡时会消失。我需要每个选项卡都可以保留 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,

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

编辑：

正如文档所说，我需要这部分：

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

4

1 回答 1

2

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

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

    <div ng-show="$state.includes('main.tab1')" ui-view="tab1"></div>

  2. 为您的标签使用共享控制器。由于粘性状态的性质，为了共享状态，最好（也是迄今为止我发现的唯一方法）使这项工作。这一步非常简单，只是不要将控制器分配给您的子状态，您应该一切顺利。

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

$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

我希望这有帮助 ：）

于 2015-11-03T20:13:28.790 回答