一个完整的自定义指令所包含的内容

    angular.module(...);

      .directive('My-directive', function(injectables) {

        restrict: 'A',

     　　priority: 0,

     　　template: '<div></div>',

     　　templateUrl: 'directive.html',

     　　replace: false,

     　　transclude: false,

     　　scope: false,

     　　compile: function(tElement, tAttrs, transclude) {

     　　　　return {

     　　　　　　 pre：function preLink(scope, iElement, iAttrs, controller) { ... },

     　　　　　　 post：function postLink(scope, iElement, iAttrs, controller) { ... }

    　　　　}

    　　},

     　　link: function(scope, iElement, iAttrs) { ... }

    });


                

restrict（字符串）

restrict 是一个可选的参数。它告诉AngularJS这个指令在DOM中可以何种形式被声明。默 认AngularJS认为 restrict 的值是 A ，即以属性的形式来进行声明。

restrict 值可以是以下几种:

E 作为元素名使用

A 作为属性使用

C 作为类名使用

M 作为注释使用

template （字符串或函数）

template 参数是可选的，必须被设置为以下两种形式之一：

 一段HTML文本；

 一个可以接受两个参数的函数，参数为 tElement 和 tAttrs ，并返回一个代表模板的字符 串。

templateUrl，引入外部的一个html文件

①、false（默认值）：直接使用父scope。

②、true：继承父scope

③、对象{ }：创建一个新的“隔离”scope，但仍可与父scope通信。隔离的scope，通常用于创建可复用的指令，也就是它不用管父scope中的model。然而虽然说是“隔离”，但通常我们还是需要让这个子scope跟父scope中的变量进行绑定。绑定的策略有3种：@、=、&。

@ 这是一个单项绑定的前缀标识符

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

= 这是一个双向数据绑定前缀标识符

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

& 这是一个绑定函数方法的前缀标识符

使用方法：在元素中使用属性，好比这样 my-change="changeAge()"，注意，属性的名字要用-将多个个单词连接。

指令中的 CONTROLLER , COMPILE , LINK函数

AngularJs 的生命周期;分为两个阶段:

第一个阶段是编译阶段: 在编译阶段，AngularJS会遍历整个HTML文档并根据JavaScript中的指令定义来处理页面上声明的指令。 每一个指令的模板中都可能含 有另外一个指令，另外一个指令也可能会有自己的模板。当AngularJS调用HTML文档根部的指令时， 会遍历其中所有的模板，模板中也可能包 含带有模板的指令.一旦对指令和其中的子模板进行遍历或编译， 编译后的模板会返回一个叫做模板函数的函数。我们有机会在指令的模板函 数被返回前，对编译后的DOM树进行修改。

每当一个指令被创建的时候，都会有这样一个选择，是继承自己的父作用域（一般是外部的Controller提供的作用域或者根作用域（$rootScope）），还是创建一个新的自己的作用域，当然AngularJS为我们指令的scope参数提供了三种选择，分别是：false,true,{}；默认情况下是false。

              <div ng-controller="MyCtrl" class="div1">
                    Ctrl:<br>
                    <input ng-model="userName">{{userName}}<br>
                    Directive:<br>
                    <hello></hello>
                        兄弟<br>
                    <hello></hello>
                    </div>

             angular.module("app",[])

            //测试true和false
            .controller("MyCtrl",function($scope){
                            $scope.userName="山水";
                        })
                        .directive("hello",function () {
                            return{
                                restrict:"AECM",
                                template:'<div><input type="text" ng-model="userName">{{userName}}</div>',
                                replace:true,
                                scope:false              }
                        })

           

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

注意：此时我们在输入框里改变名字，会发现上面的两个名字都发生了变化

当把scope属性设置为true时，这表明我们创建的指令要创建一个新的作用域，这个作用域继承自我们的父作用域。

修改上面的JS代码，将指令中的：scope:false修改为scope:true "

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

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

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

当我们将scope的属性设置为{}时，我们可以做更多的事情。

AngularJS最强的大的地方之一就是它可以构建组件，无论放在哪里都是可以使用的；这所以可以做到这些，不得不归功于指令的这个属性；当我们将scope设置为{}时，意味着我们创建的一个新的与父作用域隔离的新的作用域，这使我们在不知道外部环境的情况下，就可以正常工作，不依赖外部环境。

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

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

在创建了隔离的作用域，我们可以通过@,&,=引用应用指令的元素的属性

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

1.@：单向绑定，外部scope能够影响内部scope，但反过来不成立；

这是一个单项绑定的前缀标识符。使用方法：在元素中使用属性，好比这样

                
                    <div my-directive="" my-name="{{name}}"></div>
                
                

注意，属性的名字要用-将两个单词连接，因为是数据的单项绑定所以要通过使用{{}}来绑定数据。

2、=：双向绑定，外部scope和内部scope的model能够相互改变；

这是一个双向数据绑定前缀标识符。使用方法：在元素中使用属性，好比这样

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

注意，数据的双向绑定要通过=前缀标识符实现，所以不可以使用{{}}。

3、&：把内部scope的函数的返回值和外部scope的任何属性绑定起来。

这是一个绑定函数方法的前缀标识符。使用方法：在元素中使用属性，好比这样

                    <div test-directive="" action="click()"></div>
                

注意，属性的名字要用-将多个个单词连接。

我们的指令是如何利用这些前缀标识符来寻找我们想要的属性或者函数的？

@ 当指令编译到模板的name时，就会到scope中寻找是否含有name的键值对，如果存在，就像上面那样，看到@就知道这是一个单向的数据绑定，然后寻找原来的那个使用指令的元素上（或者是指令元素本身）含有这个值的属性即my-name={{name}}，然后在父作用域查找{{name}}的值，得到之后传递给模板中的name。

=和&与@差不多，只不过=进行的是双向的数据绑定，不论模板还是父作用域上的属性的值发生改变都会使另一个值发生改变，而&是绑定函数而已。