什么是AngularJS指令？

Question

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

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

什么是AngularJS指令？

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

在主页上：

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

在开发人员文档中：

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

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

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

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

Answer 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是什么？这就是指令。