我花了很多时间阅读 AngularJS 文档和几个教程,我对文档的难以接近程度感到非常惊讶。
我有一个简单的、可回答的问题,可能对其他想要学习 AngularJS 的人也有用:
什么是 AngularJS 指令?
在某个地方应该有一个简单、精确的指令定义,但是AngularJS 网站提供了这些令人惊讶的无用定义:
在主页上:
指令是 AngularJS 中一个独特而强大的功能。指令让您发明新的 HTML 语法,特定于您的应用程序。
在开发者文档中:
指令是一种教授 HTML 新技巧的方法。在 DOM 编译期间,指令与 HTML 匹配并执行。这允许指令注册行为,或转换 DOM。
还有一系列关于指令的讨论,具有讽刺意味的是,它们似乎假设观众已经理解它们是什么。
为了清晰的参考,任何人都可以提供一个指令的精确定义,它解释了:
它是什么(以 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 中,我们有诸如<a href="...">, <img src="...">, <br>,之类的东西<table><tr><th>。您如何描述 a、href、img、src、br、table、tr 和 th 是什么?这就是指令。
<a href="...">
<img src="...">
<br>
<table><tr><th>