什么是AngularJS指令？

Question

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

我有一个简单的,可回答的问题,对于想要获取AngularJS的其他人也可能有用:

什么是AngularJS指令？

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

指令是AngularJS中独特而强大的功能.指令允许您创建特定于您的应用程序的新HTML语法.

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

并且有一系列关于指令的讨论,具有讽刺意味的是,似乎假设观众已经了解它们是什么.

任何人都可以提供一个明确的参考,准确定义指令的解释:

Answer 1

它是什么(以jQuery的清晰定义为例)？

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

^†指令通常只有(后)链接功能.复杂的指令可以具有编译功能,预链接功能和后链接功能.

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

指令最强大的功能是扩展HTML.您的扩展是用于构建应用程序的域特定语言(DSL).例如,如果您的应用程序运行在线购物网站,您可以扩展HTML以获得"购物车","优惠券","特价"等指令 - 无论何种单词或对象或概念在"在线购物"域名,而不是"div"和"span"s(如@WTK已经提到的).

指令还可以组件化HTML - 将一堆HTML组合成一些可重用的组件.如果您发现自己使用ng-include来提取大量HTML,那么可能是重构指令的时候了.

它体现了什么样的设计模式,或者它如何适应声称的MVI/MVW angularjs任务

指令是您操纵DOM并捕获DOM事件的地方.这就是指令的编译和链接函数都接收"元素"作为参数的原因.您可以

在HTML中,我们有类似的事情<a href="...">,<img src="...">,<br>,<table><tr><th>.您如何描述a,href,img,src,br,table,tr和th是什么？这就是指令.

好的,我现在有了更好的理解.考虑它的一种方法是:**1.**DSL通常代表[语法树](http://en.wikipedia.org/wiki/Abstract_syntax_tree)**2.**HTML DOM是DSL语法树但它是一个严格的标签:标签大多是严格设计和用途,而不是可扩展的.**3.**AngularJS和具体的指令机制,允许开发人员构建自定义树节点,使HTML DOM更加灵活.这些节点可以表示新行为或现有行为的聚合(子树)**4.**因此,指令允许HTML DOM演变为自定义DSL (9认同)
马克,谢谢.我认为这很清楚,可能最接近准确答案.我认为指令总是绑定到html标签对吗？因此,或许更准确地说,指令是绑定到HTML标记的函数.因此,它允许以声明方式扩展HTML语言. (2认同)

Answer 2

对于角度指令,可能是一个非常简单和初始的定义

AngularJS指令(ng-directives)是具有ng前缀(ng-model,ng-app,ng-repeat,ng-bind)的HTML属性,由Angular用于扩展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之前所说的一切.