Javascript 什么是 AngularJS 指令？

What is an AngularJS directive?

提问by tohster

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 的人有用：

What is an AngularJS directive?

什么是 AngularJS 指令？

There should be a simple, precise definition of a directive somewhere, but the AngularJS websiteoffers these surprisingly useless definitions:

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

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.

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

In the 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.

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

And there is a series of talksabout 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:

任何人都可以提供一个明确的定义，作为明确的参考，一个指令是什么，解释：

1. What it is (see the clear definition of jQueryas an example)
2. What practical problems and situations it is intended to address
3. What design pattern it embodies, or alternatively, how it fits into the purported MVC/MVWmission of AngularJS.

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

采纳答案by Mark Rajcok

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

它是什么（以 jQuery 的明确定义为例）？

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.

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

^†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?

它打算解决哪些实际问题和情况？

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。您的扩展是用于构建应用程序的领域特定语言(DSL)。例如，如果您的应用程序运行一个在线购物网站，您可以扩展 HTML 以具有“购物车”、“优惠券”、“特价商品”等指令——在“在线购物”域，而不是“div”和“span”（正如@WTK 已经提到的）。

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.

指令还可以将 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

它体现了什么设计模式，或者，它如何适应 angularjs 所谓的 MVC/MVW 任务

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

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

• define a bunch of HTML (i.e., a template) to replace the directive
• bind events to this element (or its children)
• add/remove a class
• change the text() value
• watch for changes to attributes defined in the same element (actually it is the attributes' values that are watched -- these are scope properties, hence the directive watches the "model" for changes)
• etc.

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

---

---

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

回答by jplozgom

Maybe a really simple and initialdefinition for angular directives would be

也许角度指令的一个非常简单和初始的定义是

AngularJS directives (ng-directives) are HTML attributes with an ng prefix (ng-model, ng-app, ng-repeat, ng-bind) used by Angular to extends HTML. (from: W3schools angular tutorial)

AngularJS 指令（ng-directives）是带有 ng 前缀（ng-model、ng-app、ng-repeat、ng-bind）的 HTML 属性，Angular 使用它来扩展 HTML。（来自：W3schools angular 教程）

Some examples of this would be

这方面的一些例子是

The ng-appdirective defines an AngularJS application.

The ng-modeldirective binds the value of HTML controls (input, select, textarea) to application data.

The ng-binddirective binds application data to the HTML view.

的NG-应用指令定义的AngularJS应用。

的NG-模型指令结合HTML控件（输入，选择，文本区域）到应用数据的值。

的NG-绑定指令结合应用数据以HTML视图。

<div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>

Check this tutorial , at least for me it was one of the best introductions to Angular. A more complete approach would be everything that @mark-rajcok said before.

检查本教程，至少对我来说，这是对 Angular 最好的介绍之一。更完整的方法是@mark-rajcok 之前所说的一切。

回答by WTK

Looking at the documentation, directives are structures you can write that angularjs parses in order to create objects and behaviors.In other words it's a template in which you use mix of any arbitrary nodes and pseudo-javascript and placeholders for data to express intentions of how your widget (component) is structured, how it behaves and how it is feed with data. Angularjs then runs against those directivesto translate them into working html/javascript code.

查看文档，指令是您可以编写 angularjs 解析以创建对象和行为的结构。换句话说，它是一个模板，您可以在其中混合使用任何任意节点和伪 javascript 以及数据占位符来表达意图您的小部件（组件）是结构化的，它的行为方式以及它如何提供数据。然后 Angularjs 针对这些指令运行以将它们转换为可用的html/javascript 代码。

Directives are there to so you can build more complex components (widgets) using proper semantics. Just take a look at the angularjs example of directives - they're defining the tab pane (which isn't of course valid in regular HTML). It's more intuitive than using like div-s or spans to create structure which is then styled to look likea tab pane.

指令在那里，因此您可以使用适当的语义构建更复杂的组件（小部件）。看看指令的 angularjs 示例 - 它们定义了选项卡窗格（这在常规 HTML 中当然无效）。它比使用 div-s 或 span 来创建结构更直观，然后将其样式设置为看起来像选项卡窗格。

回答by Vivek Panday

In AngularJS Directives are html re markers for a HTML DOM element like an attribute(restrict- A), element name(restrict- E), comment(restrict- M) or CSS class(restrict - C) that tell AngularJS's HTML compiler ($compile) to perform a specified behavior to that DOM element or even transform the DOM element and its children.Some Example are ng-bind ,ng-hide/show etc.

在 AngularJS 指令中是 HTML DOM 元素的 html re 标记，如属性（限制- A）、元素名称（限制- E）、注释（限制- M）或 CSS 类（限制- C），它们告诉 AngularJS 的 HTML 编译器（$ compile) 对该 DOM 元素执行指定的行为，甚至转换 DOM 元素及其子元素。一些示例是 ng-bind 、ng-hide/show 等。

回答by raam86

The homepage is very clear about this: When you hover over tabs in the last section:

主页对此非常清楚：当您将鼠标悬停在最后一部分的选项卡上时：

We've extended HTML's vocabulary with a custom tabselement. The tabsabstracts the complex HTML structure and behavior necessary for rendering of tabs. The result is a more readable view and very easily reusable syntax."

我们用自定义tabs元素扩展了 HTML 的词汇。该tabs抽象必要的渲染选项卡的复杂的HTML结构和行为。结果是一个更易读的视图和非常容易重用的语法。”

Then in the next tab:

然后在下一个选项卡中：

angular.module('components', []).
  directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: function($scope, $element) {
        var panes = $scope.panes = [];

        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        }

So you can invent html elements i.e tabsand let angular handle the rendering of those elements.

所以你可以发明 html 元素，即tabs让 angular 处理这些元素的渲染。