AngularJS学习--Directives

2018-03-10 本文已影响0人 belllee

Directives是什么？

AngularJS Directives是DOM元素(例如属性，元素名，注释或CSS类)上的标记，它告诉AngularJS的 html 编译器($compile) 把特定的操作连接到DOM元素或转化为DOM元素及其子元素，使元素拥有某些特定的行为。指令是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令，但还是经常需要创建应用特定的指令。

什么时候需要用Directives？

不要滥用Directives，如下一些场合需要考虑使用：

当某些元素或者元素组合以及其行为，需要在多个页面或者位置重复使用时；
引用其他jQuery组件，并且在加载数据后需要进行初始化时；

使用Directives的好处

去除重复代码
使得HTML更具可读性例如：

//未使用指令时，无法知道该文本框的作用，需要查看JS代码。
<input type="text" />
//使用指令后，根据指令可得知是时间输入框。显然后者更清晰明了。
<input type="text" data-date-picker />

注意：如果不涉及DOM定义，也可以考虑使用serivces

Directives有哪些形式？

AngularJS中有四种类型的自定义指令：

元素指令 E

<data-my-directive></ data-my-directive>

属性指令 A

<div data-my-attr></div>

CSS class 指令 C

<div class="my-class"></div>

注释指令 M

 <!– directive:my-comment -- >

Directives的命名

如果要符合HTML5的规范，可以在元素前面添加 x- 或者 data-的前缀。在匹配指令的时候，Angular会在元素或者属性的名字中剔除 x- 或者 data- 前缀。然后将 – 或者 : 连接的字符串转换成驼峰(camelCase)现形式，然后再与注册过的指令进行匹配。例如：

//指令定义
app.directive('helloWorld', function() {})

//指令应用
<div data-hello-world></div>

当然，如果不需要符合HTML5规范，不可以加x- 或者 data- 前缀，一样可以正常使用。

Directives初体验

指令示例如下，

//指令定义
angular.module(‘app‘,[])
.directive('helloWorld', function() {
  return {
      restrict: 'AE',
      replace: 'true',
      template: '<h3>Hello World!!</h3>'
  };
});

//指令应用
<div hello-world></div>

Directive的基本属性说明：

restrict – 这个属性用来指定指令的类型，可用类型：A E C M。
template – 这个属性规定了指令被Angular编译和链接后生成的HTML字符串。可以包含其他的指令，以及表达式({ { } })等。
templateUrl—模板文件（template属性的HTML字符串保存成HTML文件）的URL地址，元素内容复杂的情况下推荐使用。
replace – 这个属性指明生成的HTML内容是否会替换掉定义此指令的HTML元素。默认是false，templat内容直接插入到该元素里。
transclude –说明指令是否复制原始标记中的内容。默认为false。注意：当前指令元素无子元素只有文本内容时，会自动添加span元素。

Directive的属性——link：

如果我们要为DOM元素添加事件监听、监听模型属性变化、以及更新DOM等等行为时，就需要使用link属性。

link: function(scope, element , attrs)  {
        //dosomething
    }

参数说明：

scope – 指令的scope。在我们的例子中，指令的scope就是父controller的scope。
element – 指令的jQLite(jQuery的子集)包装DOM元素。如果你在引入AngularJS之前引入了jQuery，那么这个元素就是jQuery元素，而不是jQLite元素。由于这个元素已经被jQuery/jQLite包装了，所以我们就在进行DOM操作的时候就不需要再使用 $()来进行封装，可直接调用。 element .css('cursor', 'pointer');
attrs 一个包含了指令所在元素的属性的标准化的参数对象。举个例子，你给一个HTML元素添加了一些属性，那么可以在 link 函数中通过 attrs.attributename 来使用它。

Directive的属性——compile：

    compile: function(element, attrs) {
        //dosomething
    }

compile 函数在 link 函数被执行之前用来做一些DOM改造。它接收下面的参数：

element – 指令所在的元素
attrs– 元素上赋予的参数的标准化列表

要注意的是 compile 函数不能访问 scope，并且必须返回一个 link 函数。但是如果没有设置 compile 函数，你可以正常地配置 link 函数，（有了compile，就不能用link，link函数由compile返回）。

大多数的情况下，你只需要使用 link 函数。这是因为大部分的指令只需要考虑注册事件监听、监视模型、以及更新DOM等，这些都可以在 link 函数中完成。但是对于像 ng-repeat 之类的指令，需要克隆和重复 DOM 元素多次，在 link 函数执行之前由 compile 函数来完成。这就带来了一个问题，为什么我们需要两个分开的函数来完成生成过程，为什么不能只使用一个？要回答好这个问题，我们需要理解指令在Angular中是如何被编译的。

指令是如何被编译的？

当应用引导启动的时候，Angular开始使用 $compile 服务遍历DOM元素。这个服务基于注册过的指令在标记文本中搜索指令。一旦所有的指令都被识别后，Angular执行他们的 compile 方法。如前面所讲的，compile 方法返回一个 link 函数，被添加到稍后执行的 link 函数列表中。这被称为编译阶段。如果一个指令需要被克隆很多次（比如 ng-repeat），compile函数只在编译阶段被执行一次，复制这些模板，但是link 函数会针对每个被复制的实例被执行。所以分开处理，让我们在性能上有一定的提高。这也说明了为什么在 compile 函数中不能访问到scope对象。在编译阶段之后，就开始了链接（linking）阶段。在这个阶段，所有收集的 link 函数将被一一执行。指令创造出来的模板会在正确的scope下被解析和处理，然后返回具有事件响应的真实的DOM节点。

Directive的属性——scope：

创建指令的作用范围，scope在指令中作为属性标签传递。scope 是创建可以复用指令的必要条件，每个指令（不论是处于嵌套指令的哪一级）都有其唯一的作用域，它不依赖于父scope。
scope与父scope的关系可以分为隔离和继承两种。

继承（默认就是继承）： scope: true,
完全隔离：scope : {},
部分隔离： scope : {name=‘@userName’}

非完全隔离场景下又存在如下3种继承关系：

scope: {
    name : '@',
    age : '=',
    doUpdate : '&'
}

“@” 单向绑定，数值可以从父scope传递到子scope，反之则不行。
“=” 双向绑定，数值可以在父scope，子scope之间互相传递
“&“ 引用，类似函数指针，使得子scope可以直接调用父scope函数，从而修改父scope的变量。
上述举例中，是属性和scope成员变量名称一致的情况。如果不一致，需要在符号后添加原始属性名称。例如：name:'@enName'

注意：指令应用时，继承的属性名称必须使用-连接单词，不能用驼峰命名。

<div my-directive do-update="doUpdate"><div>