Javascript Angular Ui Router Extras |尝试实现粘性状态，但不工作

我想用这个来模拟我的处境：

我有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
          })
      });

仅对states

home.tab*.table

应用sticky。这起作用，但不符合要求。例如，我在搜索框中键入的内容，在更改选项卡时显示。我需要每个选项卡保留3个数组（如下所述）中的内容。这是我的问题

我有3个阵列：

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

我使用一个名为

$scope.clear_arrays

的函数来清除数组上的数据（甚至在

$stateChangeSuccess

上）。我不知道这是否可以得到我想要的

我知道我必须使用很棒的

（sticky State）

库，但我不知道如何将其应用到我的案例中。我尝试过：

sticky: true,
deepStateRedirect: true,

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

编辑：

正如上面所说，我需要的正是这一部分：

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

---

在使用ui router extra的粘性状态时，需要记住几个设计决策：

$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',
    }
  }
})

为每个状态使用命名视图，并在这些状态变为活动状态时隐藏/显示它们。如果您仔细考虑，这会使…如果我们完全从DOM中删除这些视图，则应用程序的该部分的状态将消失（例如，想想部分键入的输入框）。以下是一个示例：

为您的选项卡使用共享控制器。由于粘性状态的性质，为了共享状态，最好（也是迄今为止我发现的唯一方法）实现这一点。这一步非常简单，只是不要将控制器分配给子状态，您应该准备好了

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

$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',
    }
  }
})

下面是一个使用粘性状态的非常简单的示例：

对于您的应用程序，我应用了上面列出的原则并删除了表子状态，因为这些子状态有点复杂。因此为了简化，我冒昧地将表包装在一个指令中，并将数据从父范围传递到表中

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

请记住，

Model.tab1

包含

tab1

状态的元素数组（记住共享控制器）

最后，这里是您的应用程序处理粘性状态：

---

我希望这有帮助：）

您的选项卡需要动态吗？我看到您正在自动化许多事情，这为实现粘性状态增加了大量复杂性。例如，对于粘性状态，我们需要做的一件事是对ui视图执行如下操作：

重现问题的最短代码应该在您的问题中；以plunkr为辅助。如果plunkr链路404s；那么这个问题对未来的访客来说就没用了。@sergiocruz谢谢你的回答！是的，我知道这有点复杂，但我真的需要标签可以是动态的。也许你可以给我一些帮助，或者一些例子来了解粘性状态是如何与标签一起工作的。我的朋友，我的朋友@为了让我们重新打开问题并解决您的问题，您需要输入代码。这就是为什么我们对这个问题有一个明确的原因。@robe007这是我最接近它的原因：让我知道这是否对你有效，我将很高兴发布一个详细的答案，说明我必须做什么才能使这项工作有效。这是一个截图：谢谢你的回答。我已经做了另一个改变，这是最后一个也是最棒的应用：！