javascript - 什么是 AngularJS 指令？

Question

我花了很多时间阅读 AngularJS 文档和一些教程，我对这些文档的难以接近程度感到非常惊讶。

我有一个简单的、可回答的问题，可能对其他想要学习 AngularJS 的人也有用:

什么是 AngularJS 指令？

在某处应该有一个简单、精确的指令定义，但是 AngularJS website提供这些令人惊讶的无用定义:

On the home page :

Directives are a unique and powerful feature available in AngularJS. Directives let you invent new HTML syntax, specific to your application.

在 developer documentation :

Directives are a way to teach HTML new tricks. During DOM compilation directives are matched against the HTML and executed. This allows directives to register behavior, or transform the DOM.

还有一个series of talks具有讽刺意味的是，这些指令似乎假设观众已经理解它们是什么。

为了清晰的引用，谁能提供一个指令的精确定义来解释:

1. 它是什么(以明确的 definition of jQuery 为例)
2. 它打算解决哪些实际问题和情况
3. 它体现了什么样的设计模式，或者说，它如何适应所谓的 MVC/MVW AngularJS 的使命。

Answer 1

What it is (see the clear definition of jQuery as an example)?

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

^† 指令通常只有一个(后)链接功能。一个复杂的指令可以有一个编译函数、一个预链接函数和一个后链接函数。

What practical problems and situations is it intended to address?

指令可以做的最强大的事情是扩展 HTML。您的分机是 Domain Specific Language (DSL) 用于构建您的应用程序。例如，如果您的应用程序运行在线购物网站，您可以扩展 HTML 以具有“购物车”、“优惠券”、“特价商品”等指令——在“在线购物”域，而不是“div”和“span”(正如@WTK 已经提到的)。

指令还可以组件化 HTML——将一堆 HTML 组合成一些可重用的组件。如果您发现自己使用 ng-include 来提取大量 HTML，那么可能是时候重构为指令了。

What design pattern does it embody, or alternatively, how does it fit into the purported MVC/MVW mission of angularjs

指令是您操作 DOM 和捕获 DOM 事件的地方。这就是指令的编译和链接函数都接收“元素”作为参数的原因。你可以

• 定义一堆 HTML(即模板)来替换指令
• 将事件绑定(bind)到该元素(或其子元素)
• 添加/删除类
• 更改 text() 值
• 监视同一元素中定义的属性的更改(实际上是监视属性的值——这些是范围属性，因此该指令监视“模型”的更改)
• 等等

---

在 HTML 中，我们有像 <a href="..."> 这样的东西。 , <img src="..."> , <br> , <table><tr><th> .您如何描述 a、href、img、src、br、table、tr 和 th 是什么？这就是指令。