什么是 AngularJS 指令? [英] What is an AngularJS directive?
问题描述
我花了很多时间阅读 AngularJS 文档和几个教程，我对文档的难以理解感到非常惊讶.
I have spent quite a lot of time reading through AngularJS documentation and several tutorials, and I have been quite surprised at how unapproachable the documentation is.
我有一个简单的、可以回答的问题，它可能对其他想要学习 AngularJS 的人有用:
I have a simple, answerable question that may also be useful to others looking to pick up AngularJS:
什么是 AngularJS 指令?
某处应该有一个简单、精确的指令定义，但是 AngularJS 网站 提供了这些令人惊讶的无用定义:
There should be a simple, precise definition of a directive somewhere, but the AngularJS website offers these surprisingly useless definitions:
主页:
指令是 AngularJS 中独特而强大的功能.指令可让您发明新的 HTML 语法，特定于您的应用程序.
Directives are a unique and powerful feature available in AngularJS. Directives let you invent new HTML syntax, specific to your application.
在开发者文档中:
指令是教授 HTML 新技巧的一种方式.在 DOM 编译期间，指令与 HTML 匹配并执行.这允许指令注册行为，或转换 DOM.
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.
还有一个关于指令的系列演讲具有讽刺意味的是，似乎假设观众已经了解他们是什么.
And there is a series of talks about directives which, ironically, seem to assume the audience already understands what they are.
任何人都可以提供一个明确的定义来解释指令是什么，以供明确参考:
Would anyone be able to offer, for clear reference, a precise definition of what a directive is that explains:
- 它是什么(以 jQuery 的明确定义为例)
- 它打算解决哪些实际问题和情况
- 它体现了什么设计模式，或者它如何适应所谓的 MVC/MVW AngularJS 的使命.
- What it is (see the clear definition of jQuery as an example)
- What practical problems and situations it is intended to address
- What design pattern it embodies, or alternatively, how it fits into the purported MVC/MVW mission of AngularJS.
推荐答案
它是什么(以jQuery的明确定义为例)?
What it is (see the clear definition of jQuery as an example)?
指令本质上是一个函数†，当Angular编译器在DOM中找到它时就会执行.函数几乎可以做任何事情，这就是为什么我认为定义指令是相当困难的.每个指令都有一个名称(如 ng-repeat、tabs、make-up-your-own)，每个指令决定了它的使用位置:元素、属性、类、注释中.
A directive is essentially a function† that executes when the Angular compiler finds it in the DOM. The function(s) can do almost anything, which is why I think it is rather difficult to define what a directive is. Each directive has a name (like ng-repeat, tabs, make-up-your-own) and each directive determines where it can be used: element, attribute, class, in a comment.
† 一个指令通常只有一个(post)链接函数.一个复杂的指令可以有一个编译函数、一个预链接函数和一个后链接函数.
† A directive normally only has a (post)link function. A complicated directive could have a compile function, a pre-link function, and a post-link function.
它打算解决哪些实际问题和情况?
What practical problems and situations is it intended to address?
指令可以做的最强大的事情是扩展 HTML.您的扩展是用于构建应用程序的域特定语言 (DSL).例如，如果您的应用程序运行一个在线购物网站，您可以扩展 HTML 以具有购物车"、优惠券"、特价商品"等指令——在在线购物"域，而不是div"和span"(正如@WTK 已经提到的).
The most powerful thing directives can do is extend HTML. Your extensions are a Domain Specific Language (DSL) for building your application. E.g., if your application runs an online shopping site, you can extend HTML to have "shopping-cart", "coupon", "specials", etc. directives -- whatever words or objects or concepts are more natural to use within the "online shopping" domain, rather than "div"s and "span"s (as @WTK already mentioned).
指令还可以将 HTML 组件化——将一堆 HTML 组合成一些可重用的组件.如果您发现自己使用 ng-include 来提取大量 HTML，那么可能是时候重构为指令了.
Directives can also componentize HTML -- group a bunch of HTML into some reusable component. If you find yourself using ng-include to pull in lots of HTML, it is probably time to refactor into directives.
它体现了什么设计模式，或者，它如何适应angularjs 所谓的 MVC/MVW 任务
What design pattern does it embody, or alternatively, how does it fit into the purported MVC/MVW mission of angularjs
指令是您操作 DOM 和捕获 DOM 事件的地方.这就是指令的编译和链接函数都接收元素"作为参数的原因.你可以
Directives are where you manipulate the DOM and catch DOM events. This is why the directive's compile and link functions both receive the "element" as an argument. You can
- 定义一堆 HTML(即模板)来替换指令
- 将事件绑定到此元素(或其子元素)
- 添加/删除类
- 更改 text() 值
- 监视在同一元素中定义的属性的变化(实际上监视的是属性的值——这些是范围属性，因此指令监视模型"的变化)
- 等
<小时>在 HTML 中，我们有 这篇关于什么是 AngularJS 指令?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！<a href="...">, <img src="...">, <;br>、.你如何描述 a、href、img、src、br、table、tr 和 th 是什么?这就是指令.
In HTML we have things like <a href="...">, <img src="...">, <br>, <table><tr><th>. How would you describe what a, href, img, src, br, table, tr, and th are? That's what a directive is.
登录
关闭
