javascript - 如何存储使用 angular 指令的手风琴的状态

Question

我正在使用来自 angular-bootstrap 的手风琴指令。我想存储is-open这个手风琴的属性，所以如果用户转到网站上的另一个页面，手风琴的状态即is-open不会改变。我找不到可以帮助我操作属性指令的资源。

<accordion-group heading="Main Information" is-open="true">

Answer 1

您可以使用 Angular 服务来存储手风琴的状态，或者只是将其插入$rootScope以进行快速修复。

在您的角度模块运行功能中：

app.run(function($rootScope) {
  // set your default here, true for open, false for closed
  $rootScope.accordionOpen = true;
});

在您的 HTML 中：

<accordion-group heading="Main Information" is-open="accordionOpen">

这将在路由等中持续存在，但不会在浏览器刷新时持续存在。如果你想在浏览器刷新时保持不变，你的模块运行函数应该是：

app.run(function($rootScope) {
  // set your default here, true for open, false for closed
  localStorage.accordionOpen = localStorage.accordionOpen || true
  $rootScope.accordionOpen = Boolean(localStorage.accordionOpen);
  $rootScope.toggleAccordion = function() {
    localStorage.accordionOpen = !Boolean(localStorage.accordionOpen);
  });
});

在您的 HTML 中：

<accordion-group heading="Main Information" ng-click="toggleAccordion()" is-open="accordionOpen">

如果您希望在关闭浏览器选项卡时将其清除，请更改localStorage为。sessionStorage原因Boolean()是因为 localstorage 只能存储 type String。