如何在使用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狀態？您仍然會將狀態對象放在範圍內，而不是在待辦事項對象內。聽起來這種狀態不屬於待辦事項對象，因爲你不想堅持它。