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

在调度程序中，我添加了一些按钮，用于对服务进行操作，以将不同的值设置为存储在服务中的数据。第三个按钮实际上是从服务中提取数据并应用于控制器的数据。这只是为了模拟您在路由中来回移动时可能遇到的情况，并且当用户再次访问该站点的某个部分时，您的控制器将被重新实例化。