综合分析AngularJS中的说明(必须参见)

编辑：宝哥软件园来源：互联网时间：2021-10-30

新天龙八部

评分

说到AngularJS，我们大概会首先想到双向数据绑定和指令系统，这也是AngularJS中最吸引人的地方。双向数据绑定，我觉得没什么好说的，所以今天我们就简单讨论一下AngularJS框架的指令系统。我也是初学者，查阅过一些资料。如果有一些不好的地方，王湾指出。

作为AngularJS最重要的部分，框架本身的指令比较多，但是在开发中，这些指令通常不能满足我们的需求，所以我们也需要定制一些指令。那么一个AngularJS指令在HTML代码中可以有四种形式：

1.将其用作新的HTML元素。

Hello/hello或hello/2用作元素的属性。

Div hello/div3，用作一类元素。

Div class='hello'/div4，用作注释。

！-directive: hello-注意这里有一个陷阱，就是“directive : hello”后面要有空格，否则没有效果。同时，推荐注释的方法仍然很少使用。如果非要追求高个子，那就顺其自然吧。既然指令有以上四种表现形式，具体是如何定义的？指令(' hello '，function(){ return { restrict 3360 ' aecm '，template 3360 ' button click me/button ' })以上是定义指令最简单的代码，没有。在上面的代码中，方法指令()定义了一个新的指令，它有两个参数。第一个“hello”指定指令的名称是hello，第二个参数是返回指令对象的函数。那么在上面的代码中，函数主要使用两个属性来定义hello指令：

1.属性“restrict[string]”主要用于指定指令在HTML代码中可以使用哪些表达式形式。a代表属性，e代表元素，c代表类，m代表注释。在实践中，我们一般使用AE。

2.属性模板[字符串或函数]指定由Angular编译和链接指令后生成的HTML标记。这个属性可以简单到只有一个HTML文本，也可以特别复杂。当该属性的值为function时，方法返回一个表示模板的字符串，表达式{{}}也可以用在其中。

template : function(){ return ' button click me/button '；}但一般情况下，属性模板会被templateUrl替代，templateUrl是用来指向一个外部文件地址的，所以我们通常会把模板放在一个外部HTML文件中，然后用template URL来指向它。

在定义指令时，除了上述两个基本属性之外，我们还将使用许多其他属性，因此让我们逐一讨论它们：

1.priority[number]属性，用于指定用户定义指令的优先级。当一个DOM元素上有多个指令时，需要比较指令的优先级，优先级高的指令会先执行。这个优先级是用来在执行指令的编译函数之前进行排序的，所以我们下面会详细讲一下编译函数。

2.终端[布尔]属性。此参数用于定义是否在当前元素上停止优先级低于此指令的指令。如果值为真，则为正常，按优先级顺序执行。如果设置为false，将不执行当前元素上优先级低于该指令的指令。

3.replace[boolean]属性，用于指定生成的HTML内容是否会替换定义此指令的HTML元素。当我们将该属性的值设置为true时，打开控制台，可以看到该指令生成的元素如下所示：

当我们将其设置为false时，它将如下所示：

。

4.链接[函数]属性。在上面的例子中，我们的自定义指令实际上并不是很有意义。只是最简单的指令，还有很多属性我们没有给他定义，所以用处不大。例如，链接函数包括三个参数：范围、元素和属性。这个链接功能主要是给DOM元素增加事件监控，监控模型属性的变化，更新DOM。它包含三个参数：

1:作用域参数，当我们没有为指令定义作用域属性时，它代表父控制器的作用域。

二：元素参数，即jqlite(jquery的子集)的指令包装了DOM元素。如果在介绍AngularJS之前先介绍jQuery，那么这个元素就是jQuery元素，而不是jQLite元素。由于这个元素已经被jQuery/jQLite包装了，所以我们在进行DOM操作时不需要用$()包装它。

3.attrs参数，包含指令所在元素属性的标准化参数对象。

5.scope[boolean或object]属性，用于定义指令的范围。默认为false，也就是说指令继承了父控制器的范围，可以随意使用父控制器范围内的属性，但这会污染父范围内的属性，这是不可取的。因此，我们可以让scope取以下两个值：true和{}。

如果为真，则意味着Angular将为指令创建一个继承自父作用域的作用域。

var myapp=angular.module('myapp '，[])。控制器(' myctrl '，['$scope '，函数($ scope){ $ scope . color=' red '；}]) .指令(' hello '，function(){ return { restrict : ' AECM '，replace:true，template : ' button ng-click=' say hello()' style=' background-color : { { color } } ' click me/button '，scope:true，link: function (scope，elements，attrs) { elements.bind('click ')，function(){ elements . CSS(' background-color '，' blue ')；})}}})这里，我们为父范围定义了一个颜色属性，并将其指定为红色。在hello指令的作用域属性中，我们给出了true，因此angular为此指令创建了一个继承自父作用域的作用域。然后在模板属性中，我们使用了从父范围继承的带有{{}}的颜色属性，所以按钮将是红色的。

当为{}时，表示创建一个独立的作用域，不会继承父作用域的属性。但是有时我们需要访问父范围中的属性或方法，那么我们应该怎么做呢？Angular早就为我们想到了这一点，并且有三种方法可以让我们记住上面的操作：

1:使用@实现单向绑定。如果我们只给这个{}值的范围，上面代码中按钮的背景颜色将是灰色的。

如果我们需要使用父范围的颜色属性，我们可以这样写：

范围{ color:'@color'}

Hello color='{{color}}'/hello这里有两点需要注意：1。范围中的属性颜色代表表达式模板{{}}中的颜色，它们必须一致。2.范围内属性颜色的值，也就是@后的颜色，表示下面HTML元素中的属性颜色，所以必须一致。如果此处的属性名与模板中的表达式{{}}中使用的名称相同，则@后的属性名可以省略，并写成以下形式。

作用域{ color:'@'}从指令中作用域的值可以看出，指令模板中表达式{{}}中的颜色指向当前元素的color属性，这个color属性的值就是父作用域的color属性的值。父范围将其颜色属性值传递给当前元素的颜色属性，然后颜色属性将该值传递给模板中表达式中的颜色。这个过程是单向的。

二：使用=实现双向绑定。指令(' hello '，function(){ return { restrict : ' AECM '，replace:true，template : ' button style=' background-color : ' { { color } } ' click me/button '，scope:{ color:'=' }，link: function (scope，elements，attrs) { elements.bind('click ')，function(){ elements . CSS(' background-color '，' blue ')；范围。$ apply(function(){ scope . color=' pink '；})})} })hello color=' color '/helloinputype=' text ' ng-model=' color '/在这里，我们双向绑定指令作用域中的color属性和父作用域中的color属性，并在指令的link函数中添加一个click事件。点击按钮会改变按钮的颜色，改变指令范围的颜色属性值，然后在HTML页面中添加一个输入标签，输出或输入父范围的颜色属性值。这里有一点需要注意：表达式{{}}没有添加到当前元素的属性名的值中，因为这里的父作用域传递的是实作用域数据模型，而不是简单的字符串，所以我们可以将简单的字符串、数组甚至复杂的对象传递给指令的作用域。现在让我们看看当我们点击这个按钮时会发生什么。

在这里我们可以看到按钮的颜色已经变成了粉色，说明点击改变了指令范围的颜色属性，从而导致按钮颜色的改变。但是在这里，不仅按钮发生了变化，输入表单中的值也变成了粉红色，这意味着父范围的颜色属性也发生了变化。另外，让我们在输入中输入一种颜色，看看会发生什么。

可以看出，当我们在表单中输入另一种颜色时，按钮的颜色也会发生变化，这意味着指令范围的颜色属性已经发生了变化。综上所述，我们可以发现使用'='实现了双向绑定。

三：用于调用父作用域中的方法。

var myapp=angular.module('myapp '，[])。控制器(' myctrl '，['$scope '，函数($ scope){ $ scope . color=' red '；$ scope . say hello=function(){ alert(' hello ')；};}]) .指令(' hello '，function(){ return { restrict : ' AECM '，replace:true，template : ' button ng-click=' say hello()' style=' background-color : '{ { color } } ' click me/button '，scope:{ color:'='，sayhello:'' }，link 33: function(scope，elements，attrs) { elements.bind('click '，function () { elements。范围。$ apply(function(){ scope . color=' pink '；})})} })hello color=' color ' say hello=' say hello()'/helloinputype=' text ' ng-model=' color '/在这里，我们还需要注意两点：1。我们不仅需要在模板中使用ng-click指令，还需要在要调用的父作用域中绑定方法，并在当前元素中添加一个。2.指令范围的属性sayhello、当前元素的属性sayhello、模板绑定的事件方法名sayhello应该一致。然后我们可以点击按钮，弹出一个对话框。

6.transclude[boolean]属性，用于让我们指定指令是否可以包含任何内容。指令(' hello '，function(){ return { restrict : ' AECM '，replace:true，transclude:true，scope:{}，Template : ' div ng-transclude/div '，})hello hello span { { color } }/span/hello当他的值为true时，。

这是页面上的输出值。当为false时，页面将为空白。这里有一个地方需要注意，就是span{{color}}/span，这里的颜色就是父范围内的颜色。不是指令中范围的颜色属性。

7.编译[函数]参数。这个方法有两个参数：元素和属性。第一个参数元素是指指令所在的元素，第二个attrs是指元素上给出的标准化参数列表。这里还有一点需要注意：编译函数不能访问作用域，必须返回一个链接函数。但是如果没有设置编译函数，可以正常配置link函数(有了compile，就不能用link了，link函数由compile返回)。指令(' hello '，function(){ return { restrict : ' AECM '，replace:true，translude:true，template : ' button ng-click=' say hello()' style=' background-color 3: { { color } } ' click me/button '，scope:{ color:'='，sayhello:'' }，compile 3: function(element，attrs){ return(scope，elements范围。$ apply(function(){ scope . color=' pink '；}) }) };}}})现在让我们点击这个按钮。

我们发现点击这里的按钮之后发生的事情和之前的链接属性是一样的，但是没有太大的区别。

事实上，在大多数情况下，我们只需要使用链接功能。这是因为大多数指令只需要考虑注册事件监控、监控模型和更新DOM，这些都可以在link函数中完成。但是对于ng-repeat这样的指令，需要多次克隆和重复DOM元素，这是在执行link函数之前由编译函数完成的。那么为什么我们需要两个独立的函数来完成生成过程，为什么不能只用一个呢？要很好地回答这个问题，我们需要了解Angular中的指令是如何编译的！

8.指令是如何编译的？

当我们的angular应用程序启动时，angular将使用$compile服务遍历DOM元素。识别出所有指令后，Angular将调用该指令的编译方法，返回一个链接函数，然后将该链接函数添加到链接函数列表中，以便以后执行。这个过程称为编译阶段。像ng-repeat这样的指令需要多次克隆，编译阶段只执行一次编译函数，这些模板都是复制的，但是对于每个复制的实例都会执行link函数。所以分开处理，让我们在性能上有一定的提升(这句话有点不可理解，我是从其他地方抄来的。

9.控制器[string或function]的参数又要求[string或string[]，当我们想要允许其他指令与你的指令交互时，就需要使用控制器函数。当另一条指令想要交互时，它需要向您的指令控制器实例声明它的需求。指令(' hello '，function(){ return { scope : } }，require:'^he'，compile: function (element，attrs) { return function (scope，elements，attrs，cntins){ cntins . fn()}；} } }) .指令(' he '，function(){ return { restrict : ' AE '，scope : } }，controller: function ($scope，$compile，$ http){ this . fn=function(){ alert(' hello ')；};} } })he hello color=' color ' say hello=' say hello()'/hello/he页面加载后，会弹出一个对话框。