Question

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

我有一个简单的，可回答的问题，对于想要选择AngularJS的其他人也有用：

什么是AngularJS指令？

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

On the home page：

指令是AngularJS中独特而强大的功能。使用指令可以创建特定于应用程序的新HTML语法。

在developer documentation：

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

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

任何人都可以提供明确的参考资料，明确指出解释的指令：

它是什么（见清楚definition of jQuery为例）
打算解决的实际问题和情况
它体现了什么样的设计模式，或者它如何适应AngularJS声称的MVC / MVW任务。

Answer 1

它是什么（以jQuery的清晰定义为例）？

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

^†指令通常只有（post）链接功能。复杂的指令可以有编译功能，预链接功能和后链接功能。

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

指令最强大的功能是扩展HTML。您的扩展程序是用于构建应用程序的Domain Specific Language（DSL）。例如，如果您的应用程序运行在线购物网站，您可以扩展HTML以获得“购物车”，“优惠券”，“特价”等指令 - 无论何种单词或对象或概念在“在线购物“域名，而不是”div“和”span“s（如@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

对于angular指令，可能只有简单和初始定义

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控件的值（输入，   选择，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重新标记，如属性（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，让角度处理这些元素的渲染。

什么是AngularJS指令？

5 个答案: