Question

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

我正在为todo项目实现“详细视图”显示/隐藏控制器。当我点击链接时，会显示或隐藏详细视图。详细视图状态存储在todo.showDetails中。这很好。

当我将待办事项标记为已完成时，我会使用以下命令将其当前状态保留在服务器上：

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

这导致我的详细视图在todo.showDetails状态丢失时隐藏，因为它不是持久项的一部分（即，它被服务器的todo项视图覆盖，它不包含UI州todo.showDetails）。我并不感到惊讶，这是有道理的。

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

在AngularJS中有没有惯用的方法？我不想在服务器上保留像showDetails这样的UI值。

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

- 更新2013-02-25 -

我在下面answer中执行了操作，并简单地将UI状态与$ resource.get / query调用创建的待办事项分开。它比我想象的要简单得多（见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示例有点做作，在我的todo应用程序的上下文中更有意义。也许我应该删除问题，如果它难以理解或太微不足道？

Answer 1

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

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

1 个答案: