javascript - 如何存储使用 Angular Directive(指令)的 Accordion 的状态

Question

我正在使用 Angular-bootstrap 中的 Accordion 指令。我想存储此 Accordion 的 is-open 属性，因此如果用户转到网站上的另一个页面，accordion 的状态即 is-open 不会改变。我找不到可以帮助我操作属性指令的资源。

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

Answer 1

您可以使用 Angular 服务来存储 Accordion 的状态，或者将其粘贴到 $rootScope 中进行快速修复。

在你的 Angular 模块中运行函数:

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 只能存储 String 类型。