Angular UI Bootstrap：访问内页子菜单时使手风琴保存状态

Question

Angular UI Bootstrap：制作手风琴保存状态

如何让 Angular UI Bootstrap 中的手风琴保存其状态？

我想要的行为是当用户点击手风琴内的链接，然后点击返回时，与以前一样展开相同的组。

如果有帮助，我正在使用带有 ui-router 的 SPA，我很乐意将状态保存为 cookie。

我还没有走多远，因为我还没有弄清楚如何读取手风琴的状态，更不用说保存它了。

Answer 1

Plunker

我添加了一个status 属性来保存手风琴元素的状态

{
  title: 'Dynamic Group Header - 1',
  content: 'Dynamic Group Body - 1',
  status: true
}

使用is-open="group.status" 设置跟踪手风琴状态的指令：

<accordion close-others="oneAtATime">
  <accordion-group heading="{{group.title}}" ng-repeat="group in groups" is-open="group.status">
  {{group.content}}
  </accordion-group>
</accordion>

我建立了一个服务来保存手风琴数据：

app.factory('accordionKeeper', function() {
  var accordionState = {};
    return {
      get: function() {
        return accordionState;
      },
      set: function(stateObj) {
        accordionState = stateObj;
      }
    }
});

我在构建手风琴的数据集上设置了一个监视，如果数据发生变化，则将值保存在服务中：

  $scope.$watchGroup(function() {
    return $scope.groups;
  }, function(newVal, oldVal) {
    if (newVal !== oldVal) {
      accordionKeeper.set($scope.groups)
      console.log('Accordion changed.  Value set')
    }
  });

现在，如果您需要将手风琴设置为已保存状态，只需指定 $scope.groups = accordionKeeper.get();

在 plunker 中，我添加了一些对服务进行操作的按钮，为存储在服务中的数据设置不同的值。第三个按钮实际上是从服务中提取数据并应用于控制器的数据。这只是为了模拟您可能会遇到的情况，即您在路线中来回遍历，并且当用户再次访问该部分站点时，您的控制器会重新实例化。