什么是 AngularJS 指令？

Question

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

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

什么是 AngularJS 指令？

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

On the home page:

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

在developer documentation：

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

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

为了清晰的参考，谁能提供一个指令的精确定义来解释：

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

Answer 1

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

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

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

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

指令可以做的最强大的事情是扩展 HTML。您的扩展是用于构建应用程序的Domain Specific Language (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 是什么？这就是指令。

Answer 2

也许角度指令的真正简单和初始定义是

AngularJS 指令（ng-directives）是带有 ng 前缀（ng-model、ng-app、ng-repeat、ng-bind）的 HTML 属性，Angular 使用它来扩展 HTML。 (from: W3schools angular tutorial)

这方面的一些例子是

ng-app 指令定义了一个 AngularJS 应用程序。

ng-model 指令绑定 HTML 控件的值（输入、 select, textarea) 到应用程序数据。

ng-bind 指令将应用程序数据绑定到 HTML 视图。

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

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

Answer 3

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

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

Answer 4

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

Answer 5

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

我们使用自定义 tabs 扩展了 HTML 的词汇表 元素。 tabs 抽象了复杂的 HTML 结构 以及呈现选项卡所需的行为。结果是一个更 可读的视图和非常容易重用的语法。”

然后在下一个标签中：

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;
        }

因此您可以发明 html 元素，即 tabs，并让 Angular 处理这些元素的呈现。