什么是AngularJS指令？
我花了很多时间阅读AngularJS文档和几个教程，我对文档的难以接近感到非常惊讶。
我有一个简单的，可回答的问题，对于那些想要selectAngularJS的人来说也是有用的：
什么是AngularJS指令？
在某个地方应该有一个简单的，精确的指令定义，但是AngularJS网站提供了这些令人惊讶的无用定义：
在主页上 ：
指令是AngularJS中独一无二的强大function。 指令让你发明新的HTML语法，特定于你的应用程序。
在开发者文档中 ：
指令是教导HTML新技巧的一种方法。 在DOM编译期间，指令与HTML匹配并执行。 这允许指令注册行为，或者转换DOM。
讽刺的是，有一系列关于指令的讨论似乎假定观众已经了解了这些指令。
任何人都可以提供清楚的参考，准确定义一个指令是什么解释：
- 它是什么（ 以jQuery的明确定义为例）
- 它打算解决哪些实际问题和情况
- 它体现了什么样的devise模式，或者说它是如何适应AngularJS的声称的MVC / MVW的使命。
它是什么（以jQuery的明确定义为例）？
一个指令本质上是一个函数，当Angular编译器在DOM中发现它时执行。 函数几乎可以做任何事情，这就是为什么我认为定义一个指令是相当困难的原因。 每个指令都有一个名称（比如ng-repeat，tabs，make-up-your-own），每个指令都可以决定它的使用位置：元素，属性，类。
†一个指令通常只有一个（后）链接function。 一个复杂的指令可以有一个编译function，一个前链接function和一个后链接function。
它打算解决哪些实际问题和情况？
最强大的东西指令可以做的就是扩展HTML。 您的扩展程序是用于构build应用程序的域特定语言 （DSL）。 例如，如果您的应用程序运行在线购物网站，则可以将HTML扩展为具有“购物车”，“优惠券”，“特价”等指令 – 无论单词或对象或概念在“网上购物“的域名，而不是”div“和”span“（如@WTK已经提到）。
指令还可以组件化HTML – 将一堆HTML组合成一些可重用的组件。 如果你发现自己使用ng-include来引入大量的HTML，那么可能是重构指令的时候了。
它是什么样的devise模式，或者说，它是如何适应angularjs的声称的MVC / MVW的使命
指令是操纵DOM并捕获DOM事件的地方。 这就是为什么指令的编译和链接函数都接受“元素”作为参数。 您可以
- 定义一堆HTML（即模板）来replace指令
- 将事件绑定到此元素（或其子元素）
- 添加/删除一个类
- 更改文本（）值
- 观察在同一元素中定义的属性的变化（实际上是被监视的属性的值 – 这些是范围属性，因此指令监视变化的“模型”）
- 等等
在HTML中，我们有类似于<a href="..."> ， <img src="..."> ， <br> ， <table><tr><th> 。 你会怎样描述一下，href，img，src，br，table，tr和th是什么？ 这是一个指令。
也许一个非常简单的初始定义的angular度指令将是
AngularJS指令（ng-directives）是带有ng前缀（ng-model，ng-app，ng-repeat，ng-bind）的HTML属性，用于Angular扩展HTML。 （ 来自：W3schoolsangular度教程 ）
这方面的一些例子是
ng-app指令定义了一个AngularJS应用程序。
ng-model指令将HTML控件（input，select，textarea）的值绑定到应用程序数据。
ng-bind指令将应用程序数据绑定到HTML视图。
<div ng-app=""> <p>Name: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div>
查看本教程，至less对我来说这是Angular最好的介绍之一。 更完整的方法将是@ mark-rajcok之前所说的一切。
查看文档，指令是angularjs为了创build对象和行为而编写的结构。换句话说，它是一个模板，您可以在其中使用任意任意节点的混合，并使用伪javascript和占位符来表示数据的意图你的小部件（组件）是结构化的，它的行为如何，以及它如何与数据一起提供。 然后Angularjs运行这些指令将它们转换成可用的html / javascript代码。
指令在那里，所以你可以使用适当的语义构build更复杂的组件（小部件）。 只要看一下指令的angularjs例子 – 他们正在定义标签窗格（这在常规的HTML中当然不是有效的）。 它比直接使用div或者span来创build结构更直观，然后将样式devise为一个标签窗格。
在AngularJS中，指令是一个HTML DOM元素的HTML标记，例如属性（restrict-A），元素名称（restrict-E），注释（restrict-M）或者CSS类别（restrict-C），它们告诉AngularJS的HTML编译器（$编译）对该DOM元素执行指定的行为，甚至转换DOM元素及其子元素。一些例子是ng-bind，ng-hide / show等
主页非常清楚：当您将鼠标hover在最后一部分的标签上时：
我们已经使用自定义
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处理这些元素的渲染。
