隔离作用域 angularjs，抛弃依赖注入，可重用组件

Question

我已经有一段时间没有真正摆弄 angularjs 的指令了，而且我还没有很好地掌握它。在我深入研究之前，我正在考虑他们如何做他们的组件。

所以我搜索了如何使用指令创建可重用组件，并找到了这篇文章：

http://michalostruszka.pl/blog/2015/01/18/angular-directives-di/

但他的最终解决方案的实现相当模糊，因为我无法弄清楚如何正确使用它。

假设我创建了一个标题指令：

<epw-title store="epwEventStore">{{vm.title}}</epw-title>

另一个指令使用相同的服务 epwEventStore 以便它可以更新状态

<epw-event-list store="epwEventStore"></epw-event-list>

epw-event-list 呈现列表的位置，单击时应更改epw-title 的vm.title 的值。

这怎么可能？

更新

问：它们是嵌套的吗？ 答：不，他们是兄弟姐妹。

Answer 1

不要将服务放在视图中

为了避免任何误解，如果epwEventStore是一个AngularJS服务（例如provider，factory，service），它并不意味着作为属性值在你的模板里面这样：

<epw-title store="epwEventStore">{{vm.title}}</epw-title>

在设计良好的解耦架构中，您的视图（模板）不应“了解”任何有关您的服务的信息。他们应该只引用controllers、directives和filters。

不同的指令可以使用相同的服务

这意味着你可以完美拥有

...
.directive("first", function(myService) { 
   ...
})

.directive("two", function(myService) { 
   ...
})
...

在哪里，例如，两个指令都可以访问和操作相同的数据。

Angular 方式是声明性的

遵循 Angular 的理念，如果你的 directive 依赖于一个服务，你可以在指令的定义中声明它。因此，任何阅读代码的人 - 都会立即了解所有依赖项。这使得代码可读。

文章的作者似乎建议使用events 代替。这是发布订阅模式。然而，在你的directive 中使用它，尤其是$rootScope，会使指令“泄漏”，因为它不再被封装，并且会影响外部状态并受到影响。更糟糕的是 - 读者现在已经手动搜索所有代码库，以查找受directive 发出的事件影响的人。这种模式有其用途，但应谨慎使用。