184

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

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

什么是 AngularJS 指令？

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

在主页上：

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

在开发者文档中：

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

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

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

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

5 回答 5

143

它是什么（以 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 是什么？这就是指令。

于 2012-12-16T02:23:30.177 回答
11

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

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

这方面的一些例子是

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

ng-model指令将HTML 控件（输入、选择、文本区域）的值绑定到应用程序数据。

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

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

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

于 2014-09-10T07:16:44.543 回答
4

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

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

于 2012-12-14T09:08:24.653 回答
3

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

于 2015-05-14T06:48:33.090 回答
2

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

我们使用自定义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 处理这些元素的渲染。

于 2012-12-14T09:13:15.393 回答