1

我已经有一段时间没有真正摆弄 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列表的位置以及单击时应更改 的vm.titleepw-title

这怎么可能?

更新

问:它们是嵌套的吗? A:不,他们是兄弟姐妹。

4

1 回答 1

1

不要将服务放在视图中

只是为了避免任何误解,如果epwEventStoreAngularJS 服务(例如provider, factory, service),它并不意味着像这样作为属性值放在模板中:

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

在设计良好的解耦架构中,您的视图(模板)不应该“知道”任何关于您的服务的信息。他们应该只指controllers,directivesfilters

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

这意味着你可以完美地拥有

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

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

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

Angular 方式是声明性的

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

这篇文章的作者似乎建议的是events改用。这是发布订阅模式。但是,在您的 中使用它directive,尤其是与 一起使用$rootScope,会使指令“泄漏”,因为它不再被封装,并且会影响外部状态并受到影响。更糟糕的是 - 读者现在已经手动搜索所有代码库,以查找受directive. 这种模式有其用途,但应小心使用。

于 2015-04-26T06:36:56.940 回答