1

如果您能分享您的观点/经验，我将不胜感激。

假设您有一个视图，其中包含几个共享一些数据（从服务器获取）的小部件。例如，我们可能在同一个视图中有一个树、列表和面包屑小部件，自然单个项目的名称可以同时显示在多个小部件中。我的问题是发展这种观点的最佳实践是什么？具体来说：

  1. 小部件是否完全独立？（最容易实现，但存在性能问题）
  2. 如果小部件是依赖的，它们是否通过以下方式进行通信：
    1. 单一模型（在小部件之间引入紧密耦合并防止进一步的代码演变）
    2. 事件（失去耦合但由于失去合同而容易出错，不太明确的代码）
    3. 任何其他方式
  3. 如果这些小部件有自己的控制器和范围，您如何将更改通知从 URL（或任何其他事件）传播到所有这些小部件？例如，如果您想使用 URL 路由查看具有特定 ID 的实体，您是否有一个最顶层的视图控制器负责捕获此更改并使用某种内部机制通知所有小部件，或者执行小部件独立捕捉事件？

我想所有这些问题都以某种方式相关，因此请随意以您喜欢的任何形式/顺序回答它们。

谢谢。

4

1 回答 1

3

小部件是否完全独立？

我认为这个问题太宽泛了，我们无法回答，因为这实际上取决于小部件/指令在做什么。您是在问他们是否应该使用隔离范围？另请参阅在 AngularJS 中编写指令时，我如何决定是否需要新的作用域、新的子作用域或新的隔离作用域？

他们是通过……交流吗？

再说一遍，太宽泛了，抱歉……这取决于指令的作用。除了您已经列出的方式外，您还可以通过以下方式进行交流

  • 一个服务，如果我有两个以上需要通信的指令，我可能会使用它
  • require: 'controllerNameHere'. 使用该require方法，您将使用this而不是在控制器上定义方法$scope。但是，这种方法基本上仅限于单向通信：从require必须的指令到它需要的指令。例如，在 AngularJS 主页上，pane指令require是tabs指令。这允许pane指令调用tabs指令控制器上的方法，但tabs指令不能调用pane指令控制器上的方法。（有关此的更多信息，请参阅AngularJS 控制器中的“this”与 $scope）

你如何传播变更通知

这取决于您的指令具有的范围类型。如果你使用scope: true你的指令，你不必传播任何东西。它们都可以$watch有一些父范围属性（并且由于 JavaScript 原型继承的工作方式，所有指令都可以看到父范围属性）。如果您正在使用scope: {...}，那么您可以使用 '=' 或 '@' 来定义本地指令范围变量并使用$watch来监视它们。

如果您担心 $watches 的性能（因为它们在每个摘要周期至少被评估一次），那么事件可能更合适。

另一件需要考虑的事情：您希望您的指令了解 URL 还是范围属性？使用范围属性可能会使您的指令更可重用。

于 2013-03-18T14:36:09.590 回答