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

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

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

这些小部件是完全独立的吗？（最容易实现，但存在性能问题）

如果小部件相互依赖，它们是否通过以下方式进行通信：

单一模型（引入小部件之间的紧密耦合并防止进一步的代码演化）

事件（失去耦合，但由于失去契约而容易出错，代码不太明确）

还有别的办法吗

如果这些小部件有自己的控制器和作用域，如何将更改通知从URL（或任何其他事件）传播到所有这些小部件？ 例如，如果您想使用URL路由查看具有特定ID的实体，您是否有最顶层的视图控制器负责捕获此更改并使用某种内部机制通知所有小部件，或者小部件是否独立捕获事件

我想所有这些问题都有某种关联，所以请随意以任何形式/顺序回答它们

谢谢

这些小部件是完全独立的吗

我认为这是一个太宽泛的问题，我们无法回答，因为这实际上取决于小部件/指令在做什么。你是在问他们是否应该使用隔离作用域吗？另见

他们是否通过

再一次，太宽了，对不起。。。这取决于指令的作用。除了您已经列出的方式外，您还可以通过

• 一个服务，如果我有两个以上需要通信的指令，我可能会使用它

• 要求：'controllerNameHere'

  。使用

  require

  方法，您可以使用

  this

  而不是

  $scope

  在控制器上定义方法。但是，这种方法基本上仅限于单向通信：从具有

  require

  的指令到它所需要的指令。例如，在AngularJS主页上，

  窗格

  指令要求s选项卡指令。这允许

  窗格

  指令调用

  选项卡

  指令控制器上的方法，但

  选项卡

  指令不能调用

  窗格

  指令控制器上的方法。（有关详细信息，请参阅）

如何传播更改通知

这取决于指令的作用域类型。如果对指令使用

scope:true

，则不必传播任何内容。它们都可以

$watch

一些父作用域属性（由于JavaScript原型继承的工作方式，所有指令都可以看到父作用域属性）。如果使用的是

作用域：{…}

，则可以使用“=”或“@”来定义本地指令作用域变量，并使用

$watch

来监视它们

如果您关心$watchs的性能（因为每个摘要周期至少对它们进行一次评估），那么事件可能更合适

---

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

所说的“小部件”是指“指令”？指令或较小的视图。其思想是，这是作为应用程序中的一个单独的UI组件开发的。谢谢你的回答。我的意思是说，它们是否都有单独的业务逻辑，例如，从服务器获取相关数据以供显示。我的担心当然有两个方面——如果它们在这方面是独立的，那么它们很容易编写和重用，但是由于其他小部件可能需要相同的数据，这是对网络的浪费。另一方面，如果它们相互依赖，它们就会紧密耦合，难以维护。我将在脑海中处理您的其他建议，并让您知道它们是否适用于我们的情况。谢谢。马克，你好。对我来说，使用服务或require属性的通信听起来有点过于耦合，这样小部件就失去了灵活性。因此，我倾向于使用基于事件的沟通。关于最后一个问题，实际上，您建议的侦听父范围上的某些属性的方法似乎是最好的，因为它减少了依赖性。总的来说，你可以看到我更喜欢开发独立的小部件。然而，我的项目中有人更喜欢在公共（更高）范围内维护共享模型，因此所有小部件都可以看到相同的数据。从通信的角度来看，这种方法要简单得多，因此数据只位于一个地方，所有的小部件都可以访问它，因此不需要通信，因为基本上你看的是相同的数据。然而，这引入了硬耦合，我担心一旦产品变得更大、更复杂，并且您开始在其他地方重用小部件，硬耦合将变得难以管理。@Stas，我个人更倾向于使用一种服务，而不是使用普通的上作用域。通用的上限方法需要特定的HTML结构（或使用$rootScope）。我不建议数据共享受到HTML结构的限制。