什么是AngularJS指令？

我花了很多时间阅读AngularJS文档和一些教程，对于文档的难懂性，我感到很惊讶。

我有一个简单的，可以回答的问题，对于其他希望使用AngularJS的人也可能有用：

什么是AngularJS指令？

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

在主页上：

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

在开发人员文档中：

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

具有讽刺意味的是，有一系列关于指令的讨论，似乎是在假定读者已经理解了它们是什么。

任何人都可以提供什么是指令的精确定义以供参考：

1. 它是什么（请参阅jQuery的清晰定义作为示例）
2. 打算解决哪些实际问题和情况
3. 它体现了什么设计模式，或者如何适合AngularJS的MVC / MVW任务。

它是什么（请参阅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事件的地方。这就是指令的compile和link函数都将“ element”作为参数接收的原因。您可以

• 定义一堆HTML（即模板）来替换指令
• 将事件绑定到此元素（或其子元素）
• 添加/删除课程
• 更改text（）值
• 监视在同一元素中定义的属性的更改（实际上是监视的属性的值-这些是作用域属性，因此该指令监视“模型”的更改）
• 等等

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

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

这样的一些例子是

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

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

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

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

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

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

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

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

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

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