小编典典

什么是 AngularJS 指令?

all

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

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

什么是 AngularJS 指令?

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

在主页上

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

开发者文档中:

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

还有一系列关于指令的讨论,具有讽刺意味的是,它们似乎假设观众已经理解它们是什么。

为了清晰的参考,任何人都可以提供一个指令的精确定义,它解释了:

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

阅读 111

收藏
2022-08-01

共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 事件的地方。这就是指令的编译和链接函数都接收“元素”作为参数的原因。你可以

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

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

2022-08-01