从零学前端第十三讲：AngularJs进阶-指令

修真院Web工程师零基础全能课

 

本节课内容

AngularJs进阶-指令

 

主讲人介绍

沁修，葡萄藤技术总监

项目经验丰富，擅长H5移动项目开发。

专注技术选型、底层开发、最佳代码实践规范总结与推广。

 

直播录屏版

传送门：https://v.qq.com/x/page/p0775...

 

 

文字版解析

 

概述

 

指令是什么？

 

其实我们从一开始接触到angularjs就在使用指令了

指令就像是教给html的一些小花招，它会附加在html的元素上，以自定义标记的方式，告诉angularjs的html编译器：

这某个元素加上了一些特定的行为或者是方法，还可以对html的元素进行各种操作。

 

angularjs中它本身是内置了一整套指令的，比如ngBind，ngClick，ngApp，ngView等等

但也可以自己创建自己的指令来方便我们的开发和使用。

 

 

 

 

我们先来看一下怎么去使用指令directive？

当angular启动我们的程序时，html编译器$compile就会遍历整个DOM，并且会去匹配DOM元素里的指令

 

那这些指令通常是怎么放置在html中的呢？

通常有4种方法：

 

 

不过建议大家以属性的方式为主，元素的方式为辅，其他的两种方式可以不去使用。

这样更容易看出来一个元素是跟那个指令相匹配的，更因为很多的指令都被限制为属性的方式。

这里就不多做演示了，我们默认都使用属性的方式。

 

 

 

 

指令的命名规范是？

 

指令有许多，如ngView, ngBind, ngModel等等。

但写在html中的时候有个问题就是html是不识别大小写区别的，因此驼峰的写法就会有问题。

 

有了指令匹配到元素上后，我们的编译器还需要通过另外的命名规范来匹配它们是否是一个指令：

因此命名规范会将驼峰式改为全小写，然后用破折号或者其他符号间隔的形式来实现，比如以下写法都是正确合法的：

 

• ng:bind
• ng-bind
• ng_bind
• x-ng-bind
• data-ng-bind

 

我们试着使用一下它：

{{ user }}

{{ user }}

{{ user }}

{{ user }}

{{ user }}

varmyApp=angular.module("myApp", []);

myApp.controller('Fn1',function($scope) {

$scope.user='Alex';

});

myApp.controller('Fn2',function($scope) {

$scope.user='Bill';

});

myApp.controller('Fn3',function($scope) {

$scope.user='Coco';

});

myApp.controller('Fn4',function($scope) {

$scope.user='Danel';

});

myApp.controller('Fn5',function($scope) {

$scope.user='Eleven';

});

 

 

接下来看看指令在html中的编译步骤：

 

 

1.首先，将html转换为DOM对象

 

2.然后它会遍历整个DOM，识别指令，将指令和与之对应DOM一起放到directive列表当中。

按顺序执行他们每一个的compile()函数（编译函数），这个时候他们会拥有一个修改DOM结构的机会，并且会产生一个link()函数。

因此最后会返回一个组合的linking函数，是页面中所有指令自身的compile函数返回的linking函数集合。

 

3.通过上一步返回的linking函数集合，把html模板和scope作用域连接起来，同时还能注册一些监听器。

最后让scope和DOM之间形成双向即时的绑定。

 

我们来看一个例子：

 

add

{{user}}

 

通过这个例子，我们来理解编译过程为啥要分为compile和link两步。

就是因为有时候需要在model发生改变后，对应DOM结构也要跟着改变。

 

其中ng-model就是一个指令，ng-repeat又是另外一个。

但ng-repeat有一个问题就是它需要很快的根据model制造出多个新的li，li元素需要被克隆和插入到ul当中。

 

而且仅仅只是克隆是不够的，还需的要编译，以便它的{{user}}可以被正确的scope解析。

如果我们只是简单的拷贝插入一个li元素，然后编译，这样每一个li元素发生改变，都会遍历整个DOM树重新运行。

如果的repeat的item有成百上千个，就会有性能问题。

 

所以解决方案就是把编译分为两个步骤：

compile阶段识别所有的directive，然后按照优先级排序，该改变DOM就改变DOM。

到linking阶段再将scope和li绑定在一起。

 

 

 

 

自定义指令？

 

我们先写一个最简单的指令：

比如有这么一段带有个人信息的模板，会在代码中重复多次，那么我们就可以使用指令来简化这个过程。

当然指令和控制器一样，也是注册在模块上的，我们先创建一个指令，来替换原本的内容：