什么是AngularJS指令?

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

我有一个简单的,可回答的问题,对于那些想要selectAngularJS的人来说也是有用的:

什么是AngularJS指令?

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

在主页上 :

指令是AngularJS中独一无二的强大function。 指令让你发明新的HTML语法,特定于你的应用程序。

在开发者文档中 :

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

讽刺的是,有一系列关于指令的讨论似乎假定观众已经了解了这些指令。

任何人都可以提供清楚的参考,准确定义一个指令是什么解释:

  1. 它是什么( 以jQuery的明确定义为例)
  2. 它打算解决哪些实际问题和情况
  3. 它体现了什么样的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处理这些元素的渲染。