javascript - 在 AngularJS 中分离模型和 View 状态

Question

我有一个很大的复杂 SPA，我正在用 Angular 编码。在其中，我需要跟踪实际的模型数据——操作为“我从后端 API 服务器获取并发送到后端 API 服务器的东西”。我也有 View 状态数据——“我跟踪的东西，但不发送到 API 服务器”。模型数据是用户昵称或论坛帖子正文之类的东西，而 View 状态数据是“这个特定的 UI 元素已展开”——它基本上是应用程序状态。

我想知道的是:对此是否有最佳实践方法？在我更复杂的 Controller 中，我有一个 ng-repeat 元素，每个元素都有 expando-UI 元素。诱惑是将这些 expandos 放在 ng-if 中并将 .showing 变量附加到对象。例如，可以想象这样一种文本:ng-repeat="user in users", ng-click="user.showing = !user.showing", ng-if="user.showing" 在几个 div 中。这真的很方便，因为我们需要的有关重复项 View 状态的所有信息都在重复项上。

这也很糟糕——它可能会覆盖从 API 服务器获取的字段，并且由于我缓存数据模型以节省 API 往返(并处理实时更新)，这也意味着当用户导航时 View 状态得到保留离开然后返回到 SPA 中的同一位置，或者如果相同的数据在屏幕上显示两次，则 View 状态将被链接(例如，相同的配置文件在屏幕上的三个位置显示为三个回复一个帖子)。

我对在这里做什么有一些想法。我可以将所有 View 状态变量封装在 Controller 中它们自己的位置，这具有使 ng-repeats 更难实现的副作用(您可能必须使用 $index 属性查找 View 状态变量) .

我可以将这个问题封装在一个指令中，在指令上调用 ng-repeat，它本身具有隔离范围并且只有一组状态变量要跟踪(因此它不需要担心跟踪复杂查看状态)。

我完全可以做 SO 社区建议的其他事情。

我倾向于指令路线。这似乎是 Angular 做事的方式。每个 UI 元素实际上并不需要在自身之外共享其状态，我目前真正这样做只是因为我最初的 Web 模型是我获得的大型 HTML 模板，然后附加了 ng-repeat 指令。我可以将 Post、Comment、Author 等元素分解为指令，然后它们就可以保持自己的状态。

Answer 1

是的，无论其值(value)如何，我最终都将所有内容分解为指令。基本上，ng-repeat 中需要跟踪 View 状态的任何项目都有自己的指令(因此也有自己的隔离范围)。我还养成了在 scope.view 上存储与 View 相关的变量的习惯，因此 scope.view.showingExpandedReply = true 或其他。这样我就不必用 View 状态信息污染数据模型。