我有一段时间没有真正摆弄angularjs的指令,我仍然没有很好地掌握它。在我深入研究之前,我正在思考如何做出他们的组件。
所以我搜索了如何使用指令创建可重用组件,并找到了这篇文章:
http://michalostruszka.pl/blog/2015/01/18/angular-directives-di/
但最终解决方案的实施非常模糊,因为我无法弄清楚如何正确使用它。
假设我创建了一个title指令:
<epw-title store="epwEventStore">{{vm.title}}</epw-title>
另一个使用相同服务epwEventStore
的指令,以便它可以更新状态
<epw-event-list store="epwEventStore"></epw-event-list>
epw-event-list
呈现列表的位置,点击后应更改vm.title
的{{1}}值。
这怎么可能?
更新
问:它们是否嵌套? A:不,他们是兄弟姐妹。
答案 0 :(得分: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的理念,如果您的directive
依赖于服务,则在指令的定义中声明它。所以无论谁读取代码 - 立即知道所有依赖关系。这使代码可读。
该文章的作者似乎建议使用events
代替。哪个是发布 - 订阅模式。但是,在directive
中使用它,尤其是$rootScope
,会使指令“泄漏”,因为它不再封装,并且都会影响外部状态并受到影响。更糟糕的是 - 读者现在可以手动搜索所有代码库,以查找受directive
发出的事件影响的任何人。这种模式有其用途,但应小心享受。