javascript - 重用共享 Controller 的功能，为每个页面维护单独的状态

Question

我想要一个在我的大多数页面中重复使用的简单 Controller ，特别是一个 sortBy Controller ，它允许人们决定按哪一列进行排序，而不是在我们的任何 ListView 中按升序或降序排序。

我想这并不难做到。我可以让我的共享模板文件添加一个使用某些 sortController 的排序 div。

但是，我想保持这种状态，因此如果有人离开我的人员页面访问我的任务页面并稍后返回，他们在人员页面上的排序顺序选择应该保持不变。维护状态的标准方法是使用服务，就像我们对其他事情所做的那样。然而，我试图重用尽可能多的功能，必须定义六个几乎相同的服务，每个页面一个，感觉很草率。

是否有更简洁的方法来定义单个服务并确保每个页面使用单独的状态？

我想到的一个选择是拥有一个带有基本映射的服务，将页面名称或 Controller 映射到它自己的状态对象。然后，sortController 可以调用 sortState.get(pageName) (或类似的东西)来获取它想要的特定状态，如果请求页面尚不存在，则生成一个新状态。

但是，我不知道这是否是最干净的方法。有没有更好的方法来重用 Controller ，也许是我忘记的一些 Angular 提供程序？

作为一个相关问题，为我的共享 sortController 提供其正在排序的列表的引用以及我想要为给定列表排序的列的最干净方法是什么？

编辑:我正在使用 ui-router，因此每个“页面”都是 URL 的不同基本抽象状态。

Answer 1

说实话，这听起来确实是带有 Controller 的指令的完美位置。假设这些是不同的模板，您可以应用带有名称属性的指令以保留状态。

<column-sort-chooser name="myNamedState" list="ctrl.myList" />

有一百万种方法可以存储状态，但一个简单的选择是简单地使用内置的 $cacheFactory

var stateCache = $cacheFactory("sortstate:" + attrs.name);

//Get current state or create a new one
var currentState = stateCache.get('sortInfo') || {};

//do some stuff with state making sure to persist for each operation
stateCache.set('sortInfo', currentState);

这样您就不必创建单独的服务，并且该指令可以在每次加载时处理加载和持久化状态。