一尘不染

什么是AngularJS指令?

angularjs

我花了很多时间阅读AngularJS文档和一些教程,对于文档的难懂性,我感到很惊讶。

我有一个简单的,可以回答的问题,对于其他希望使用AngularJS的人也可能有用:

什么是AngularJS指令?

某个地方应该有一个简单,精确的指令定义,但是AngularJS网站提供了这些令人惊讶的无用定义:

在主页上

指令是AngularJS中可用的独特而强大的功能。指令可让您发明特定于您的应用程序的新HTML语法。

开发人员文档中

指令是教授HTML新技巧的一种方式。在DOM期间,编译指令将与HTML匹配并执行。这允许指令注册行为或转换DOM。

具有讽刺意味的是,有一系列关于指令的讨论,似乎是在假定读者已经理解了它们是什么。

任何人都可以提供什么是指令的精确定义以供参考:

  1. 它是什么(请参阅jQuery的清晰定义作为示例)
  2. 打算解决哪些实际问题和情况
  3. 它体现了什么设计模式,或者如何适合AngularJS的MVC / MVW任务。

阅读 204

收藏
2020-07-04

共1个答案

一尘不染

它是什么(请参阅jQuery的清晰定义作为示例)?

指令本质上是一个函数†,当Angular编译器在DOM中找到它时执行。函数几乎可以执行任何操作,这就是为什么我认为定义指令是相当困难的原因。每个指令都有一个名称(如ng-
repeat,tabs,make-up-your-own),每个指令都确定可以在何处使用它:元素,属性,类,注释中。

†指令通常仅具有(后)链接功能。复杂的指令可以具有编译功能,预链接功能和后链接功能。

打算解决哪些实际问题和情况?

指令可以做的最强大的事情就是扩展HTML。您的扩展名是用于构建应用程序的领域特定语言(DSL)。例如,如果您的应用程序运行在线购物网站,则可以将HTML扩展为具有“购物车”,“优惠券”,“特殊商品”等指令-
不论“单词”,“对象”或“概念”在“在线购物”域,而不是“ div”和“ span”(如@WTK所述)。

指令还可以将HTML组件化-将一堆HTML分组为一些可重用的组件。如果您发现自己使用ng-include引入了大量HTML,则可能是时候重构为指令了。

它体现了什么设计模式,或者它如何适应angularjs所谓的MVC / MVW任务

指令是您操作DOM并捕获DOM事件的地方。这就是指令的compile和link函数都将“ element”作为参数接收的原因。您可以

  • 定义一堆HTML(即模板)来替换指令
  • 将事件绑定到此元素(或其子元素)
  • 添加/删除课程
  • 更改text()值
  • 监视在同一元素中定义的属性的更改(实际上监视的是属性的值-这些是作用域属性,因此该指令监视“模型”的更改)
  • 等等

在HTML中,我们有类似的事情<a href="..."><img src="..."><br><table><tr><th>。您将如何描述a,href,img,src,br,br,table,tr和th是什么?这就是指令。

2020-07-04