如何在使用AngularJS $资源时保留本地UI状态

Question

我的问题是larger program的一部分，但我用简单的jsfiddle提取了问题的模拟。

我正在为待办事项实施“详细视图”显示/隐藏控制器。当我点击链接时，会显示或隐藏详细视图。详细视图状态存储在todo.showDetails中。这工作正常。

// Persist immediately as clicked on 
$scope.checkTodo = function (todo) { 
    todo.$save(); 
}; 

这使我的详细视图去隐藏的todo.showDetails状态丢失，因为它不是持续的一部分：

当我标记为已完成待完成，我坚持用服务器的当前状态项目（即，它会覆盖服务器对todo项目的视图，该项目不包含UI状态todo.showDetails）。我并不感到惊讶，这是有道理的。

我的问题是：我的待办事项如何包含本地用户界面状态和数据保存在服务器上？当我todo.$save()，我想todo的数据被保存在服务器而在客户端代码中保留todo.showDetails的值。即，每当我打电话给todo.$save()时，我都希望我的UI状态保持不变。

在AngularJS中有这样做的习惯吗？我不想在服务器上保存UI值（如showDetails）。

我一直在想着实现这一点的一种方式是有一个单独的服务，为每个待办事项存储UI状态。当我需要访问本地状态，而不是像todo.showDetails那样访问时，我可以执行类似AppState.lookup(todo.id).showDetails或类似的操作。但也许还有一个更简单的方法..

- 更新2013年2月25日 -

我一样从待办事项以下answer和简单的分离UI状态由$ resource.get创建/查询呼叫。这是比我想象的要简单得多（见commit）：

我的控制器的变化：

 $scope.todos = Todo.query(); 
+ $scope.todoShowDetails = []; 

+ $scope.toggleShowDetails = function (todo) { 
+  $scope.todoShowDetails[todo.id] = !$scope.todoShowDetails[todo.id]; 
+ } 
+ 
+ $scope.showDetails = function (todo) { 
+  return $scope.todoShowDetails[todo.id]; 
+ } 

模板变化：

-  <label class="btn btn-link done-{{todo.done}}" ng-click="todo.showDetails = !todo.showDetails"> 
+  <label class="btn btn-link done-{{todo.done}}" ng-click="toggleShowDetails(todo)"> 
.. 
-  <div ng-show="todo.showDetails" ng-controller="TodoItemCtrl"> 
+  <div ng-show="showDetails(todo)" ng-controller="TodoItemCtrl"> 

很简单，当我把它放在代码。我的jsfiddle例子有点做作，它在我的待办应用程序的上下文中更有意义。也许我应该删除这个问题，如果它难以理解或者太琐碎？

Answer 1

是否有可能从您的待办事项对象中提取该UI状态？您仍然会将状态对象放在范围内，而不是在待办事项对象内。听起来这种状态不属于待办事项对象，因为你不想坚持它。