在Angular.js中的一个视图中开发小部件

Question

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

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

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

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

感谢。

Answer 1

  

小部件完全独立吗？

我认为这对我们来说是一个太宽泛的问题，因为这实际上取决于小工具/指令的作用。你在问他们是否应该使用隔离范围吗？另请参阅When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?

  

他们通过......沟通吗？

同样，太宽泛，抱歉......这取决于指令的作用。除了您已经列出的方式，您还可以通过

进行沟通

• 一项服务，如果我有两个以上需要沟通的指令，这可能是我使用的服务
• require: 'controllerNameHere'。使用require方法，您可以使用this而不是$scope在控制器上定义方法。此方法仅限于基本上单向通信：从具有require的指令到它需要的指令。例如，在AngularJS主页上，pane指令require是tabs指令。这允许pane指令调用tabs指令控制器上的方法，但tabs指令不能调用pane指令控制器上的方法。 （有关详情，请参阅'this' vs $scope in AngularJS controllers）

  

如何传播更改通知

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

如果您担心$ watch的表现（因为每个摘要周期至少评估一次），那么事件可能更合适。

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