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

Question

嗯，我有这个 plunkr 试图模拟我的情况：

我有 3 个选项卡，我的想法是用户在文本框中键入一个词，然后单击按钮时，一个 angular service returns 根据文本框中输入的来自数据库的答案（结果）（我已经模拟了这个过程，向 json 文件请求数据，所以它并不重要无论您输入什么，总是 return 整个数据）并在另一个视图中填充 table。

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

编辑：

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

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,

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

编辑：

正如docs所说，我正是需要这部分：

... The states for a tab in the application does not get exited when switching to one of the other tabs. The user should be able to switch back and forth between tabs without any interruption in their workflow.

Answer 1

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

为每个状态使用命名视图，并在这些状态激活时 hide/show 使用它们。如果您考虑一下，这会导致……如果我们从 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 子状态，因为这些会使事情变得有点复杂。因此，为了简化，我冒昧地将 table 包装在一个指令中，并将数据从父范围传递给它。

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

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

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

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

希望对您有所帮助:)

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

Angular Ui-Router-Extras | Trying to implement sticky states, but not working

javascript

angularjs

angular-ui-router

angularjs-routing

angular-ui-router-extras