关于angularjs指令

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

　　创建自定义指令：

　　一个Angular指令可以有以下的四种表现形式： 1. 一个新的HTML元素（<data-picker></data-picker>） 2. 元素的属性（<input type=”text” data-picker/>） 3. CSS class（<input type=”text” class=”data-picker”/>） 4. 注释（<!–directive:data-picker –>）当然，我们可以控制我们的指令在HTML中的表现形式。下面我们来看一下AngularJS中的一个典型的指令的写法。指令注册的方式与 controller 一样，但是它返回的是一个拥有指令配置属性的简单对象(指令定义对象) 。下面的代码是一个简单的 Hello World 指令。

var app = angular.module('myapp', []);

app.directive('helloWorld', function() {

  return {

      restrict: 'AE',

      replace: 'true',

      template: '<h3>Hello World!!</h3>'

  };

});

　　在上面的代码中，app.directive()方法在模块中注册了一个新的指令。这个方法的第一个参数是这个指令的名字。第二个参数是一个返回指令定义对象的函数。如果你的指令依赖于其他的对象或者服务，比如 $rootScope, $http, 或者$compile，他们可以在这个时间被注入。这个指令在HTML中以一个元素使用，如下：

<hello-world/>

//OR

<hello:world/>

　　或者，以一个属性的方式使用：

<div hello-world></div>

//OR

<div hello:world/>

restrict – 这个属性用来指定指令在HTML中如何使用（还记得之前说的，指令的四种表示方式吗）。在上面的例子中，我们使用了 ‘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 文字上点击时，背景色变回白色。相应的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提供的作用域或者根作用域（$rootScope）），还是创建一个新的自己的作用域，当然AngularJS为我们指令的scope参数提供了三种选择，分别是：false,true,{}；默认情况下是false。

　　scope = false

　　首先我们来看一下，当scope参数被设置为false时有什么情况发生在这种情况下，在指令模板中可以直接使用父作用域中的变量、函数

　　首先我们来创建一个指令，代码如下所示：

　　JS代码：

angular.module("MyApp", [])

    .controller("MyController", function ($scope) {

        //J1 这里我们在作用域里初始化两个变量

    $scope.name = "dreamapple";

    $scope.age = 20;

        //J2 创建一个方法，修改我们创建的对象的年龄

    $scope.changeAge = function () {

        $scope.age = 22;

    }

})

   //J3 创建我们的指令，指令名字为"myDirective"

    .directive("myDirective", function () {

    var obj = {

        //J4   指令的声明模式为 "AE" 属性和元素

        restrict: "AE",

        //J5   指令继承父作用域的属性和方法

        scope: false,

        replace: true,

        template: "<div class='my-directive'>" +

            "<h3>下面部分是我们创建的指令生成的</h3>" +

            "我的名字是：<span ng-bind='name'></span><br/>" +

            "我的年龄是：<span ng-bind='age'></span>" +

            "<input type='text' ng-model='name'>"+

            " </div>"

    }

    return obj;

});

　　HTML代码：

<div ng-app="MyApp">

    <div class="container" ng-controller="MyController">

        <div class="my-info">我的名字是：<span ng-bind="name"></span>

        <!-- 使用"ng-bind"防止网络状态不佳时出现没有被赋值表达式   -->

            <br/>我的年龄是：<span ng-bind="age"></span>

        </div>

        <!-- 使用属性声明指令 -->

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

    </div>

</div>

　　CSS代码：

div{

    padding: 6px;

}

div.container {

    border: 1px solid black;

}

div.my-info {

    border: 1px solid blue;

}

div.my-directive{

    border: 1px solid green;

}

　　结果result

　　下面我们来详细解释一下上面的代码：

因为我们将scope的属性设置为false所以，我们创建的指令继承了父作用域的一切属性和方法，这也使得在指令的模板中我们可以使用这些属性和方法。

注意：此时我们在输入框里改变名字，会发现上面的两个名字都发生了变化，你肯定会说，这肯定是这样啊，数据绑定嘛，好，我们接着往下走。

　　scope = true

　　当把scope属性设置为true时，这表明我们创建的指令要创建一个新的作用域，这个作用域继承自我们的父作用域。
　　等等，刚才我们不是说了，当把scope属性值设置为false时，不也是继承我们的父作用域吗？表急，我们接着往下看。

　　修改上面的JS代码，将指令中的：

　　scope:false修改为scope:true

　　然后我们再试着在我们的input输入框中写一些字符串，会发现，指令中的那个name发生了变化，但是指令外的那个name却没有发生变化，这说明了一个问题。

当我们将scope设置为true的时候，我们就新创建了一个作用域，只不过这个作用域是继承了我们的父作用域；我觉得可以这样理解，我们新创建的作用域是一个新的作用域，只不过在初始化的时候，用了父作用域的属性和方法去填充我们这个新的作用域。它和父作用域不是同一个作用域。

当我们将scope设置为false的时候,我们创建的指令和父作用域（其实是同一个作用域）共享同一个model模型，所以在指令中修改模型数据，它会反映到父作用域的模型中。

　　结果result

　　`scope = {}`

　　下面我们要进入一个好玩的部分，当我们将scope的属性设置为{}时，我们可以做更多的事情。

　　AngularJS最强的大的地方之一就是它可以构建组建，无论放在哪里都是可以使用的；
这所以可以做到这些，不得不归功于指令的这个属性；当我们将scope设置为{}时，意味着我们创建的一个新的与父作用域隔离的新的作用域，这使我们在不知道外部环境的情况下，就可以正常工作，不依赖外部环境。当然首先我们还是要给出我们的例子，先看代码,我们修改了上述的JS代码和HTML代码

　　JS代码

angular.module("MyApp", [])

    .controller("MyController", function ($scope) {

    $scope.name = "dreamapple";

    $scope.age = 20;

    $scope.changeAge = function(){

        $scope.age = 0;

    }

})

    .directive("myDirective", function () {

    var obj = {

        restrict: "AE",

        scope: {

            name: '@myName',

            age: '=',

            changeAge: '&changeMyAge'

        },

        replace: true,

        template: "<div class='my-directive'>" +

            "<h3>下面部分是我们创建的指令生成的</h3>" +

            "我的名字是：<span ng-bind='name'></span><br/>" +

            "我的年龄是：<span ng-bind='age'></span><br/>" +

            "在这里修改名字：<input type='text' ng-model='name'><br/>" +

            "<button ng-click='changeAge()'>修改年龄</button>" +

            " </div>"

    }

    return obj;

});

　　HTML代码：

<div ng-app="MyApp">

    <div class="container" ng-controller="MyController">

        <div class="my-info">我的名字是：<span ng-bind="name"></span>

            <br/>我的年龄是：<span ng-bind="age"></span>

            <br />

        </div>

        <div class="my-directive" my-directive my-name="{{name}}" age="age"  change-my-age="changeAge()"></div>

    </div>

</div>

　　结果result

　　我们使用了隔离的作用域，不代表我们不可以使用父作用域的属性和方法。

　　1、我们可以通过向scope的{}中传入特殊的前缀标识符（即prefix），来进行数据的绑定。

　　2、在创建了隔离的作用域，我们可以通过@,&,=引用应用指令的元素的属性，如上面的代码那样，我们可以在<div class="my-directive" my-directive my-name="{{name}}" age="age" change-my-age="changeAge()"></div>这个元素中，利用前缀标识符通过使用属性my-name,age,change-my-age来引用这些属性的值。

　　下面我们来看看如何使用这些前缀标识符：

`@`

这是一个单项绑定的前缀标识符
使用方法：在元素中使用属性，好比这样<div my-directive my-name="{{name}}"></div>，注意，属性的名字要用-将两个单词连接，因为是数据的单项绑定所以要通过使用{{}}来绑定数据。

`=`

这是一个双向数据绑定前缀标识符
使用方法：在元素中使用属性，好比这样<div my-directive age="age"></div>,注意，数据的双向绑定要通过=前缀标识符实现，所以不可以使用{{}}。

`&`

这是一个绑定函数方法的前缀标识符
使用方法：在元素中使用属性，好比这样<div my-directive change-my-age="changeAge()"></div>，注意，属性的名字要用-将多个个单词连接。

注意：在新创建指令的作用域对象中，使用属性的名字进行绑定时，要使用驼峰命名标准，比如下面的代码。

scope: {

            // `myName` 就是原来元素中的`my-name`属性

            name: '@myName',

            age: '=',

            // `changeMyAge`就是原来元素中的`change-my-age`属性

            changeAge: '&changeMyAge'

        }

@ 当指令编译到模板的name时，就会到scope中寻找是否含有name的键值对，如果存在，就像上面那样，看到@就知道这是一个单向的数据绑定，然后寻找原来的那个使用指令的元素上（或者是指令元素本身）含有这个值的属性即my-name={{name}}，然后在父作用域查找{{name}}的值，得到之后传递给模板中的name。
=和&与@差不多，只不过=进行的是双向的数据绑定，不论模板还是父作用域上的属性的值发生改变都会使另一个值发生改变，而&是绑定函数而已。