javascript - angularディレクティブを使用しているアコーディオンの状態を保存する方法

Question

angular-bootstrap のアコーディオン ディレクティブを使用しています。このアコーディオンの属性を保存したいis-openので、ユーザーが Web サイトの別のページに移動しても、アコーディオンの状態はis-open変化しません。属性ディレクティブの操作に役立つリソースが見つかりません。

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

Answer 1

angular Service を使用してアコーディオンの状態を保存するか、単に貼り付けて$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 は type しか格納できないためですString。