angularJs之指令详解(一)

时间 2019-11-12

原文原文链接

指令（Directives）是全部AngularJS应用最重要的部分。尽管AngularJS已经提供了很是丰富的指令，但仍是常常须要建立应用特定的指令。这篇教程会为你讲述如何自定义指令，以及介绍如何在实际项目中使用。在这篇文章的最后（第二部分），我会指导你如何使用Angular指令来建立一个简单的记事本应用。css

概述

一个指令用来引入新的HTML语法。指令是DOM元素上的标记，使元素拥有特定的行为。举例来讲，静态的HTML不知道如何来建立和展示一个日期选择器控件。让HTML能识别这个语法，咱们须要使用指令。指令经过某种方法来建立一个可以支持日期选择的元素。咱们会按部就班地介绍这是如何实现的。若是你写过AngularJS的应用，那么你必定已经使用过指令，无论你有没有意识到。你确定已经用过简单的指令，好比 ng-mode, ng-repeat, ng-show等。这些指令都赋予DOM元素特定的行为。例如，ng-repeat 重复特定的元素，ng-show 有条件地显示一个元素。若是你想让一个元素支持拖拽，你也须要建立一个指令来实现它。指令背后基本的想法很简单。它经过对元素绑定事件监听或者改变DOM而使HTML拥有真实的交互性。html

建立自定义指令

一个Angular指令能够有如下的四种表现形式：app

1. 一个新的HTML元素<data-picker></data-picker>函数

2. 元素的属性<input type=”text” data-picker/>性能

3. CSS class<input type=”text” class=”data-picker”/>spa

4. 注释<!–directive:data-picker –>rest

固然，咱们能够控制咱们的指令在HTML中的表现形式。下面咱们来看一下AngularJS中的一个典型的指令的写法。指令注册的方式与 controller 同样，可是它返回的是一个拥有指令配置属性的简单对象(指令定义对象) 。下面的代码是一个简单的 Hello World 指令。code

js代码：
orm

var app = angular.module('myapp', []);
app.directive('helloWorld', function() {
  return {
      restrict: 'AE',
      replace: 'true',
      template: '<h3>Hello World!!</h3>'
  };
});

html代码：
htm

<div hello-world></div>

在上面的代码中，app.directive()方法在模块中注册了一个新的指令。这个方法的第一个参数是这个指令的名字。第二个参数是一个返回指令定义对象的函数。若是你的指令依赖于其余的对象或者服务，好比 $rootScope, $http, 或者$compile，他们能够在这个时间被注入。

咱们在指令定义过程当中使用了三个属性来配置指令。咱们来一一介绍他们的做用。

restrict – 这个属性用来指定指令在HTML中如何使用（有四种表示方式A E C M）。在上面的例子中，咱们使用了 ‘AE’。因此这个指令能够被看成新的HTML元素或者属性来使用。若是要容许指令被看成class来使用，咱们将 restrict 设置成 ‘AEC’。
template – 这个属性规定了指令被Angular编译和连接（link）后生成的HTML标记。这个属性值不必定要是简单的字符串。template 能够很是复杂，并且常常包含其余的指令，以及表达式({{ }})等。更多的状况下你可能会见到 templateUrl，而不是 template。因此，理想状况下，你应该将模板放到一个特定的HTML文件中，而后将 templateUrl 属性指向它。
replace – 这个属性指明生成的HTML内容是否会替换掉定义此指令的HTML元素。在咱们的例子中，咱们用 <hello-world></hello-world>的方式使用咱们的指令，而且将 replace 设置成 true。因此，在指令被编译以后，生成的模板内容替换掉了 <hello-world></hello-world>。最终的输出是 <h3>Hello World!!</h3>。若是你将 replace 设置成 false，也就是默认值，那么生成的模板会被插入到定义指令的元素中。

link函数和scope

指令生成出的模板其实没有太多意义，除非它在特定的scope下编译。默认状况下，指令并不会建立新的子scope。更多的，它使用父scope。也就是说，若是指令存在于一个controller下，它就会使用这个controller的scope。如何运用scope，咱们要用到一个叫作 link 的函数。它由指令定义对象中的link属性配置。让咱们来改变一下咱们的 helloWorld 指令，当用户在一个输入框中输入一种颜色的名称时，Hello World 文字的背景色自动发生变化。同时，当用户在 Hello World 文字上点击时，背景色变回白色。这个 plunker 演示了这些概念。

相应的HTML标记以下：

<body ng-controller="MainCtrl">
  <input type="text" ng-model="color" placeholder="Enter a color" />
  <hello-world/>
</body>

修改后的 helloWorld 指令以下：

app.directive('helloWorld', function() {
  return {
    restrict: 'AE',
    replace: true,
    template: '<p style="background-color:{{color}}">Hello World',
    link: function(scope, elem, attrs) {
      elem.bind('click', function() {
        elem.css('background-color', 'white');
        scope.$apply(function() {
          scope.color = "white";
        });
      });
      elem.bind('mouseover', function() {
        elem.css('cursor', 'pointer');
      });
    }
  };
});

咱们注意到指令定义中的 link 函数。它有三个参数：

scope – 指令的scope。在咱们的例子中，指令的scope就是父controller的scope。
elem – 指令的jQLite(jQuery的子集)包装DOM元素。若是你在引入AngularJS以前引入了jQuery，那么这个元素就是jQuery元素，而不是jQLite元素。因为这个元素已经被jQuery/jQLite包装了，因此咱们就在进行DOM操做的时候就不须要再使用 $()来进行包装。
attr – 一个包含了指令所在元素的属性的标准化的参数对象。举个例子，你给一个HTML元素添加了一些属性：，那么能够在 link 函数中经过 attrs.someAttribute 来使用它。

link函数主要用来为DOM元素添加事件监听、监视模型属性变化、以及更新DOM。在上面的指令代码片断中，咱们添加了两个事件， click，和 mouseover。click 处理函数用来重置 <p> 的背景色，而 mouseover 处理函数改变鼠标为 pointer。在模板中有一个表达式 {{color}}，当父scope中的 color 发生变化时，它用来改变 Hello World 文字的背景色。

compile函数

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

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

要注意的是 compile 函数不能访问 scope，而且必须返回一个 link 函数。可是若是没有设置 compile 函数，你能够正常地配置 link 函数，（有了compile，就不能用link，link函数由compile返回）。compile函数能够写成以下的形式：

app.directive('test', function() {
  return {
    compile: function(tElem,attrs) {
      //do optional DOM transformation here
      return function(scope,elem,attrs) {
        //linking function here
      };
    }
  };
});

大多数的状况下，你只须要使用 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节点。

改变指令的scope

默认状况下，指令获取它父节点的controller的scope。但这并不适用于全部状况。若是将父controller的scope暴露给指令，那么他们能够随意地修改 scope 的属性。在某些状况下，你的指令但愿可以添加一些仅限内部使用的属性和方法。若是咱们在父的scope中添加，会污染父scope。其实咱们还有两种选择：

一个子scope – 这个scope原型继承子父scope。
一个隔离的scope – 一个孤立存在不继承自父scope的scope。

这样的scope能够经过指令定义对象中 scope 属性来配置。下面的代码片断是一个例子：

app.directive('helloWorld', function() {
  return {
    scope: true,  // use a child scope that inherits from parent
    restrict: 'AE',
    replace: 'true',
    template: '<h3>Hello World!!</h3>'
  };
});

上面的代码，让Angular给指令建立一个继承自父socpe的新的子scope。另一个选择，隔离的scope：

app.directive('helloWorld', function() {
  return {
    scope: {},  // use a new isolated scope
    restrict: 'AE',
    replace: 'true',
    template: '<h3>Hello World!!</h3>'
  };
});

这个指令使用了一个隔离的scope。隔离的scope在咱们想要建立可重用的指令的时候是很是有好处的。经过使用隔离的scope，咱们可以保证咱们的指令是自包含的，能够被很容易的插入到HTML应用中。它内部不能访问父的scope，所保证了父scope不被污染。在咱们的 helloWorld 指令例子中，若是咱们将 scope 设置成 {}，那么上面的代码将不会工做。它会建立一个新的隔离的scope，那么相应的表达式 {{color}} 会指向到这个新的scope中，它的值将是 undefined. 使用隔离的scope并不意味着咱们彻底不能访问父scope的属性。其实有一些技术能够容许咱们访问父scope的属性，甚至监视他们的变化。咱们会在指令这个系列的第二部分中讨论这些技术，以及一些更高级的概念，好比 Controller 函数。