角UI引導：請手風琴保存狀態時訪問內頁子菜單

Question

角UI引導：請手風琴保存狀態

我怎樣才能使角UI自舉手風琴保存其狀態？

我想要的行爲是，當用戶點擊手風琴內部的鏈接，然後再點擊回來，相同的組會像以前一樣展開。

如果有幫助，我用ui-router使用SPA，我很樂意將它保存爲cookie。

我還沒有走很遠，因爲我還沒有想出如何讀取手風琴的狀態，更不用說保存它了。

Answer 1

Plunker

我加了status屬性與is-open="group.status"舉辦手風琴元素

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

設置指令跟蹤手風琴的狀態的狀態：

<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();

在調度程序中，我添加了一些按鈕，用於對服務進行操作，以將不同的值設置爲存儲在服務中的數據。第三個按鈕實際上是從服務中提取數據並應用於控制器的數據。這只是爲了模擬您在路由中來回移動時可能遇到的情況，並且當用戶再次訪問該站點的某個部分時，您的控制器將被重新實例化。