Question

Angular UI Bootstrap：使手风琴保存状态

如何在Angular UI Boot strap中制作手风琴保存其状态？

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

如果有帮助，我正在使用带有ui路由器的SPA，我很高兴将状态保存为cookie。

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

Answer 1

我添加了一个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中，我添加了一些对服务进行操作的按钮，以便为存储在服务中的数据设置不同的值。第三个按钮实际上从服务中提取数据并应用于控制器的数据。这只是为了模拟您在路线中来回穿梭的情况，并且当用户再次访问该部分网站时，您的控制器会重新实例化。

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

1 个答案: