学习AngularJs:Directive指令用法（完整版）

时间  2019-11-17
标签 学习 angularjs directive 指令 用法 完整 栏目 AngularJS 繁體版
原文   原文链接

摘要：Directive（指令）笔者认为是AngularJ很是强大而有有用的功能之一。它就至关于为咱们写了公共的自定义DOM元素或CLASS属性或ATTR属性，而且它不仅是单单如此，你还能够在它的基础上来操做scope、绑定事件、更改样式等。经过这个Directive，咱们能够封装不少公共指令，好比分页指令、自动补全指令等等。而后在HTML页面里只须要简单的写一行代码就能够实现不少强大的功能。通常状况下，须要用Directive有下面的情景：
1. 使你的Html更具语义化，不须要深刻研究代码和逻辑便可知道页面的大体逻辑。
2. 抽象一个自定义组件，在其余地方进行重用。javascript

1、Directive的定义及其使用方法
AngularJs的指令定义大体以下:css

angular.module("app",[]).directive("directiveName",function(){ 
        return{ 
            //经过设置项来定义 
        }; 
})

Directive能够放置于元素名、属性、class、注释中。下面是引用myDir这个directive的等价方式。（但不少directive都限制为“属性”的使用方式）。以下一个实例 ：html

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
      <meta charset="UTF-8"> 
      <title>AngularJS入门学习</title> 
      <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
      <hello-world></hello-world> 
</body> 
<script type="text/javascript"> 
      var app = angular.module('myApp', []); 
      app.directive('helloWorld', function() { 
           return { 
                restrict: 'E', 
                template: '<div>Hi 我是林炳文~~~</div>', 
                replace: true 
           }; 
      }); 
</script> 
</html>

下面是一个directive的详细版：java

var myModule = angular.module(...); 
myModule.directive('directiveName', function factory(injectables) {
    var directiveDefinitionObject = { 
 　　     priority: 0, 
 　　     template: '<div></div>', 
 　　     templateUrl: 'directive.html',   
 　　     replace: false, 
 　　     transclude: false,   
 　　     restrict: 'A',   
 　　     scope: false,   
 　　     compile: function compile(tElement, tAttrs, transclude) {  
 　　　　       return {   
 　　　　　　           pre: function preLink(scope, iElement, iAttrs, controller) { ... }, 
 　　　　　　           post: function postLink(scope, iElement, iAttrs, controller) { ... }  
　　　　        }   
　　      },  
 　　     link: function postLink(scope, iElement, iAttrs) { ... } 
    };  
    return directiveDefinitionObject; 
});

2、Directive指令内容解读
能够看到它有8个内容
1.restrict
（字符串）可选参数，指明指令在DOM里面以什么形式被声明；取值有：E(元素),A(属性),C(类),M(注释)，其中默认值为A；固然也能够两个一块儿用，好比EA.表示便可以是元素也能够是属性。
[html] view plain copy 在CODE上查看代码片派生到个人代码片
E(元素)：<directiveName></directiveName>  
A(属性)：<div directiveName='expression'></div>  
C(类)： <div class='directiveName'></div>  
M(注释)：<--directive:directiveName expression-->  
通常状况下E/A/C用得比较多。
2.priority
(数字)，可选参数，指明指令的优先级，若在单个DOM上有多个指令，则优先级高的先执行；jquery

3.terminal
（布尔型），可选参数，能够被设置为true或false，若设置为true，则优先级低于此指令的其余指令则无效，不会被调用(优先级相同的仍是会执行)angularjs

4.template（字符串或者函数）可选参数，能够是：
（1）一段HTML文本express

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
   <meta charset="UTF-8"> 
   <title>AngularJS入门学习</title> 
   <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
   <hello-world></hello-world> 
</body> 
<script type="text/javascript"> 
   var app = angular.module('myApp', []); 
   app.directive('helloWorld', function() { 
       return { 
           restrict: 'E', 
           template: '<div><h1>Hi 我是林炳文~~~</h1></div>', 
           replace: true 
       }; 
   }); 
</script> 
</html>

（2）一个函数，可接受两个参数tElement和tAttrs
其中tElement是指使用此指令的元素，而tAttrs则实例的属性，它是一个由元素上全部的属性组成的集合（对象）形如：<hello-world2 title = '我是第二个directive'></hello-world2>  。其中title就是tattrs上的属性。数组

下面让咱们看看template是一个函数时候的状况：缓存

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
    <meta charset="UTF-8"> 
    <title>AngularJS入门学习</title> 
    <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
   <hello-world></hello-world> 
   <hello-world2 title = '我是第二个directive'></hello-world2> 
</body> 
<script type="text/javascript"> 
   var app = angular.module('myApp', []); 
   app.directive('helloWorld', function() { 
       return { 
          restrict: 'E', 
          template: '<div><h1>Hi 我是林炳文~~~</h1></div>', 
          replace: true 
       }; 
   }); 
   app.directive("helloWorld2",function(){ 
       return{ 
          restrict:'EAC', 
          template: function(tElement,tAttrs){ 
                 var _html = ''; 
                 _html += '<div>' +'hello '+tAttrs.title+'</div>'; 
                 return _html; 
          } 
       }; 
  }); 
</script> 
</html>

能够看到指令中还用到了hello-world2中的标签中的 title字段。安全

5.templateUrl（字符串或者函数），可选参数，能够是：

（1）一个表明HTML文件路径的字符串。

（2）一个函数，可接受两个参数tElement和tAttrs（大体同上）。

注意：在本地开发时候，须要运行一个服务器，否则使用templateUrl会报错 Cross Origin Request Script（CORS）错误。因为加载html模板是经过异步加载的，若加载大量的模板会拖慢网站的速度，这里有个技巧，就是先缓存模板。你能够再你的index页面加载好的，将下列代码做为你页面的一部分包含在里面。预先缓存代码以下：

<script type='text/ng-template' id='hello.html'> 
      <div><h1>Hi 我是林炳文~~~</h1></div> 
</script>

这里的id属性就是被设置在templateUrl上用的。以下：

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
    <meta charset="UTF-8"> 
    <title>AngularJS入门学习</title> 
    <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
    <hello-world></hello-world> 
</body> 
<script type="text/javascript"> 
    var app = angular.module('myApp', []); 
    app.directive('helloWorld', function() { 
        return { 
             restrict: 'E', 
             templateUrl: 'hello.html', 
             replace: true 
        }; 
    }); 
</script> 
<script type='text/ng-template' id='hello.html'> 
     <div><h1>Hi 我是林炳文~~~</h1></div> 
</script> 
</html>

输出结果以下：

另外一种办法缓存是:

app.run(["$templateCache", function($templateCache) { 
    $templateCache.put("hello.html", "<div><h1>Hi 我是林炳文~~~</h1></div>"); 
}]);

使用示例以下：

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
    <meta charset="UTF-8"> 
    <title>AngularJS入门学习</title> 
    <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
    <hello-world></hello-world> 
</body> 
<script type="text/javascript"> 
    var app = angular.module('myApp', []); 
    app.directive('helloWorld', function() { 
        return { 
            restrict: 'E', 
            templateUrl: 'hello.html', 
            replace: true 
        }; 
    }); 
    app.run(["$templateCache", function($templateCache) { 
        $templateCache.put("hello.html", "<div><h1>Hi 我是林炳文~~~</h1></div>"); 
    }]); 
</script> 
</html>

输出结果以下：

 其实第一种方法还好一些，写起来会比较快，笔者就得最多的也是第一种写法，直接包在scprit当中。

 6.replace
（布尔值），默认值为false，设置为true时候，咱们再来看看下面的例子（对比下在template时候举的例子）。

replace为true时，hello-world这个标签不在了，反之，则存在。

7.scope
  （1）默认值false。表示继承父做用域;

  （2）true。表示继承父做用域，并建立本身的做用域（子做用域）;

  （3）{}。表示建立一个全新的隔离做用域；

7.1首先咱们先来了解下scope的继承机制。咱们用ng-controller这个指令举例，

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
    <meta charset="UTF-8"> 
    <title>AngularJS入门学习</title> 
    <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
    <div ng-controller='MainController'> 
       父亲:{{name}}<input ng-model="name" /> 
       <div my-directive></div> 
    </div> 
</body> 
<script type="text/javascript"> 
    var app = angular.module('myApp', []); 
    app.controller('MainController', function ($scope) { 
         $scope.name = '林炳文'; 
    }); 
    app.directive('myDirective', function () { 
         return { 
              restrict: 'EA', 
              scope:false, 
              template: '<div>儿子:{{ name }}<input ng-model="name"/></div>' 
         }; 
    }); 
</script> 
</html>

接下来咱们经过一个简单明了的例子来讲明scope取值不一样的差异：

scope:false时：以下图

scope:true时：以下图

scope:{}时：以下图

当为false时候，儿子继承父亲的值，改变父亲的值，儿子的值也随之变化，反之亦如此。（继承不隔离）

当为true时候，儿子继承父亲的值，改变父亲的值，儿子的值随之变化，可是改变儿子的值，父亲的值不变。（继承隔离）

当为{}时候，没有继承父亲的值，因此儿子的值为空，改变任何一方的值均不能影响另外一方的值。（不继承隔离）

tip：当你想要建立一个可重用的组件时隔离做用域是一个很好的选择，经过隔离做用域咱们确保指令是‘独立'的,并能够轻松地插入到任何HTML app中，而且这种作法防止了父做用域被污染；


7.2隔离做用域能够经过绑定策略来访问父做用域的属性。
directive 在使用隔离 scope 的时候，提供了三种方法同隔离以外的地方交互。这三种分别是

"@" 绑定一个局部 scope 属性到当前 dom 节点的属性值。结果老是一个字符串，由于 dom 属性是字符串。
"&" 提供一种方式执行一个表达式在父 scope 的上下文中。若是没有指定 attr 名称，则属性名称为相同的本地名称。
"=" 经过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间创建双向绑定。

@ 局部 scope 属性

@ 方式局部属性用来访问 directive 外部环境定义的字符串值，主要是经过 directive 所在的标签属性绑定外部字符串值。这种绑定是单向的，即父 scope 的绑定变化，directive 中的 scope 的属性会同步变化，而隔离 scope 中的绑定变化，父 scope 是不知道的。

以下示例：directive 声明未隔离 scope 类型，而且使用@绑定 name 属性，在 directive 中使用 name 属性绑定父 scope 中的属性。当改变父 scope 中属性的值的时候，directive 会同步更新值，当改变 directive 的 scope 的属性值时，父 scope 没法同步更新值。

示例代码以下：

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
    <meta charset="UTF-8"> 
    <title>AngularJS入门学习</title> 
    <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
<div ng-controller="myController"> 
  <div class="result"> 
     <div>父scope： 
         <div>Say：{{name}}<br>改变父scope的name：<input type="text" value="" ng-model="name"/></div> 
     </div> 
     <div>隔离scope： 
         <div isolated-directive name="{{name}}"></div> 
     </div> 
     <div>隔离scope（不使用父scope {{name}}）： 
         <div isolated-directive name="name"></div> 
     </div> 
  </div> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.controller("myController", function ($scope) { 
     $scope.name = "hello world"; 
}).directive("isolatedDirective", function () { 
     return { 
         scope: { 
            name: "@" 
         }, 
          template: 'Say：{{name}} <br>改变隔离scope的name：
                    <input type="buttom" value="" ng-model="name" class="ng-pristine ng-valid">' 
     }; 
}); 
</script> 
</html>

 

动画效果以下：

能够看到父scope上的内容发生改变，子scope同时发生改变。而子scope上的内容发生改变。不影响父scope上的内容！

"=" 局部 scope 属性

"=" 经过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间创建双向绑定。
意思是，当你想要一个双向绑定的属性的时候，你可使用=来引入外部属性。不管是改变父 scope 仍是隔离 scope 里的属性，父 scope 和隔离 scope 都会同时更新属性值，由于它们是双向绑定的关系。

示例代码：

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
    <meta charset="UTF-8"> 
    <title>AngularJS入门学习</title> 
    <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
<div ng-controller="myController"> 
    <div>父scope： 
       <div>Say：{{user.name}}<br>改变父scope的name：
          <input type="text" value="" ng-model="userBase.name"/></div> 
       </div> 
       <div>隔离scope： 
          <div isolated-directive user="userBase"></div> 
       </div> 
    </div> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.controller("myController", function ($scope) { 
    $scope.userBase = { 
        name: 'hello', 
        id: 1 
    }; 
}).directive("isolatedDirective", function () { 
    return { 
        scope: { 
           user: "=" 
        }, 
        template: 'Say：{{user.name}} <br>改变隔离scope的name：
                  <input type="buttom" value="" ng-model="user.name"/>' 
    } 
}) 
</script> 
</html>

动画效果以下：

能够看到父scope和子scope上的内容一直都是同样的！


& 局部 scope 属性

"&"方式提供一种途经是 directive 能在父 scope 的上下文中执行一个表达式。此表达式能够是一个 function。
好比当你写了一个 directive，当用户点击按钮时，directive 想要通知 controller，controller 没法知道 directive 中发生了什么，也许你能够经过使用 angular 中的 event 广播来作到，可是必需要在 controller 中增长一个事件监听方法。
最好的方法就是让 directive 能够经过一个父 scope 中的 function，当 directive 中有什么动做须要更新到父 scope 中的时候，能够在父 scope 上下文中执行一段代码或者一个函数。

以下示例在 directive 中执行父 scope 的 function。

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
    <meta charset="UTF-8"> 
    <title>AngularJS入门学习</title> 
    <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
    <div ng-controller="myController"> 
        <div>父scope： 
            <div>Say：{{value}}</div> 
        </div> 
        <div>隔离scope： 
            <div isolated-directive action="click()"></div> 
        </div> 
    </div> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.controller("myController", function ($scope) { 
    $scope.value = "hello world"; 
    $scope.click = function () { 
        $scope.value = Math.random(); 
    }; 
}).directive("isolatedDirective", function () { 
    return { 
        scope: { 
           action: "&" 
        }, 
        template: '
              <input type="button" value="在directive中执行父scope定义的方法" ng-click="action()"/>' 
    } 
}) 
</script>

动画效果以下：

指令的内容比较多，下面再来说讲transclude、compline、link、contrller

8.transclude
 若是不想让指令内部的内容被模板替换，能够设置这个值为true。通常状况下须要和ngTransclude指令一块儿使用。 好比：template:"<div>hello every <div ng-transclude></div></div>"，这时，指令内部的内容会嵌入到ng-transclude这个div中。也就是变成了<div>hello every <div>这是指令内部的内容</div></div>。默认值为false；这个配置选项可让咱们提取包含在指令那个元素里面的内容，再将它放置在指令模板的特定位置。当你开启transclude后，你就可使用ng-transclude来指明了应该在什么地方放置transcluded内容。

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
    <meta charset="UTF-8"> 
    <title>AngularJS入门学习</title> 
    <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body>
   <div sidebox title="Links"> 
       <ul> 
           <li>First link</li> 
           <li>Second link</li> 
       </ul> 
   </div> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.directive('sidebox', function() { 
   return { 
       restrict: 'EA', 
       scope: { 
            title: '@' 
       }, 
       transclude: true, 
       template: '<div class="sidebox">
                     <div class="content">
                         <h2 class="header">{{ title }}</h2>
                         <span class="content" ng-transclude></span>
                     </div>
                  </div>' 
   }; 
}); 
</script> 
</html>

输出结果：

当transclude: false时，输出结果以下：

若是指令使用了transclude参数，那么在控制器没法正常监听数据模型的变化了。建议在连接函数里使用$watch服务。
9.controller
能够是一个字符串或者函数。

如果为字符串，则将字符串当作是控制器的名字，来查找注册在应用中的控制器的构造函数

angular.module('myApp', []) 
.directive('myDirective', function() { 
    restrict: 'A', // 始终须要 
    controller: 'SomeController' 
}) 
// 应用中其余的地方，能够是同一个文件或被index.html包含的另外一个文件 
angular.module('myApp') 
.controller('SomeController', function($scope, $element, $attrs, $transclude) { 
    // 控制器逻辑放在这里 
}); 
// 也能够直接在指令内部的定义为匿名函数，一样咱们能够再这里注入任何服务（$log,$timeout等等）
angular.module('myApp',[]) 
.directive('myDirective', function() { 
    restrict: 'A', 
    controller: function($scope, $element, $attrs, $transclude) { 
             // 控制器逻辑放在这里 
    } 
})

另外还有一些特殊的服务（参数）能够注入

（1）$scope，与指令元素相关联的做用域

（2）$element，当前指令对应的 元素

（3）$attrs，由当前元素的属性组成的对象

（4）$transclude，嵌入连接函数，实际被执行用来克隆元素和操做DOM的函数

注意： 除非是用来定义一些可复用的行为，通常不推荐在这使用。
         指令的控制器和link函数（后面会讲）能够进行互换。区别在于，控制器主要是用来提供可在指令间复用的行为但link连接函数只能在当前内部指令中定义行为，且没法再指令间复用。

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
    <meta charset="UTF-8"> 
    <title>AngularJS入门学习</title> 
    <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head>
<body> 
    <hello mycolor ="red">我是林炳文~~~</hello> 
</body> 
<script type="text/javascript"> 
    var app = angular.module('myApp', []); 
    app.directive('hello', function() { 
        return { 
             restrict: 'EA', 
             transclude: true, //注意此处必须设置为true 
             controller: function ($scope, $element,$attrs,$transclude,$log) { 
                   //在这里你能够注入你想注入的服务 
                   $transclude(function (clone) { 
                       var a = angular.element('<p>'); 
                       a.css('color', $attrs.mycolor); 
                       a.text(clone.text()); 
                       $element.append(a); 
                   }); 
                   $log.info("hello everyone"); 
             } 
         }; 
    }); 
</script> 
</html>

输出结果：

而且在控制台下输出hello everyone。

让咱们看看$transclude();在这里，它能够接收两个参数，第一个是$scope，做用域，第二个是带有参数clone的回调函数。而这个clone实际上就是嵌入的内容（通过jquery包装），能够在它上作不少DOM操做。

它还有最简单的用法就是：

<script> 
angular.module('myApp',[]).directive('mySite', function () { 
   return { 
      restrict: 'EA', 
      transclude: true, 
      controller: function ($scope, $element,$attrs,$transclude,$log) { 
          var a = $transclude(); //$transclude()就是嵌入的内容 
          $element.append(a); 
      } 
   }; 
}); 
</script>

注意：使用$transclude会生成一个新的做用域。
默认状况下，若是咱们简单实用$transclude()，那么默认的其做用域就是$transclude生成的做用域

可是若是咱们实用$transclude($scope,function(clone){}),那么做用域就是directive的做用域了

那么问题又来了。若是咱们想实用父做用域呢

可使用$scope.$parent

同理想要一个新的做用域也可使用$scope.$parent.new()；
10.controllerAs
这个选项的做用是能够设置你的控制器的别名

通常之前咱们常常用这样方式来写代码：

angular.module("app",[]) 
.controller("demoController",["$scope",function($scope){
    $scope.title = "angualr"; 
}]) 
  
<div ng-app="app" ng-controller="demoController"> 
   {{title}} 
</div>

后来angularjs1.2给咱们带来新语法糖，因此咱们能够这样写：

angular.module("app",[]) 
.controller("demoController",[function(){ 
    this.title = "angualr"; 
}]) 
  
<div ng-app="app" ng-controller="demoController as demo"> 
   {{demo.title}} 
</div>

一样的咱们也能够再指令里面也这样写：

<script> 
angular.module('myApp',[]).directive('mySite', function () { 
   return { 
       restrict: 'EA', 
       transclude: true, 
       controller:'someController', 
       controllerAs:'mainController'
       //..其余配置 
   }; 
}); 
</script>

11.require(字符串或者数组)
字符串表明另外一个指令的名字，它将会做为link函数的第四个参数。具体用法咱们能够举个例子说明。假设如今咱们要编写两个指令，两个指令中的link连接函数中（link函数后面会讲）存在有不少重合的方法，这时候咱们就能够将这些重复的方法写在第三个指令的controller中（上面也讲到controller常常用来提供指令间的复用行为）而后在这两个指令中，require这个拥有controller字段的的指令（第三个指令），

最后经过link连接函数的第四个参数就能够引用这些重合的方法了。

<!doctype html> 
<html ng-app="myApp"> 
<head> 
    <script src="http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"></script> 
</head> 
<body> 
   <outer-directive> 
       <inner-directive></inner-directive> 
       <inner-directive2></inner-directive2> 
   </outer-directive> 
<script> 
  var app = angular.module('myApp', []); 
  app.directive('outerDirective', function() { 
     return { 
        scope: {}, 
        restrict: 'AE', 
        controller: function($scope) { 
             this.say = function(someDirective) { 
             console.log('Got:' + someDirective.message); 
        }; 
     } 
  }; 
 }); 
 app.directive('innerDirective', function() { 
    return { 
       scope: {}, 
       restrict: 'AE', 
       require: '^outerDirective', 
       link: function(scope, elem, attrs, controllerInstance) { 
          scope.message = "Hi,leifeng"; 
          controllerInstance.say(scope); 
       } 
    }; 
 }); 
 app.directive('innerDirective2', function() { 
    return { 
       scope: {}, 
       restrict: 'AE', 
       require: '^outerDirective', 
       link: function(scope, elem, attrs, controllerInstance) { 
          scope.message = "Hi,shushu"; 
          controllerInstance.say(scope); 
       } 
    }; 
 });  
</script>  
</body> 
</html>

上面例子中的指令innerDirective和指令innerDirective2复用了定义在指令outerDirective的controller中的方法

也进一步说明了，指令中的controller是用来让不一样指令间通讯用的。

另外咱们能够在require的参数值加上下面的某个前缀，这会改变查找控制器的行为：

（1）没有前缀，指令会在自身提供的控制器中进行查找，若是找不到任何控制器，则会抛出一个error

（2）？若是在当前的指令没有找到所需的控制器，则会将null传给link链接函数的第四个参数

（3）^若是在当前的指令没有找到所需的控制器，则会查找父元素的控制器

（4）?^组合

12.Anguar的指令编译过程
首先加载angularjs库，查找到ng-app指令，从而找到应用的边界，

根据ng-app划定的做用域来调用$compile服务进行编译，angularjs会遍历整个HTML文档，并根据js中指令的定义来处理在页面上声明的各个指令按照指令的优先级(priority)排列，根据指令中的配置参数(template，place，transclude等)转换DOM而后就开始按顺序执行各指令的compile函数（若是指令上有定义compile函数）对模板自身进行转换

注意：此处的compile函数是咱们指令中配置的，跟上面说的$compile服务不同。每一个compile函数执行完后都会返回一个link函数，全部的link函数会合成一个大的link函数

而后这个大的link函数就会被执行，主要作数据绑定，经过在DOM上注册监听器来动态修改scope中的数据，或者是使用$watchs监听 scope中的变量来修改DOM，从而创建双向绑定等等。若咱们的指令中没有配置compile函数，那咱们配置的link函数就会运行，她作的事情大体跟上面complie返回以后全部的link函数合成的的大的link函数差很少。

因此：在指令中compile与link选项是互斥的，若是同时设置了这两个选项，那么就会把compile所返回的函数当作是连接函数，而link选项自己就会被忽略掉

1三、编译函数 Compile function

 

function compile(tElement, tAttrs, transclude) { ... }
编译函数是用来处理须要修改模板DOM的状况的。由于大部分指令都不须要修改模板，因此这个函数也不经常使用。须要用到的例子有ngTrepeat，这个是须要修改模板的，还有ngView这个是须要异步载入内容的。编译函数接受如下参数。

tElement - template element - 指令所在的元素。对这个元素及其子元素进行变形之类的操做是安全的。
tAttrs - template attributes - 这个元素上全部指令声明的属性，这些属性都是在编译函数里共享的。
transclude - 一个嵌入的连接函数function(scope, cloneLinkingFn)。
注意：在编译函数里面不要进行任何DOM变形以外的操做。 更重要的，DOM监听事件的注册应该在连接函数中作，而不是编译函数中。
编译函数能够返回一个对象或者函数。
返回函数 - 等效于在编译函数不存在时，使用配置对象的link属性注册的连接函数。
返回对象 - 返回一个经过pre或post属性注册了函数的对象。参考下面pre-linking和post-liking函数的解释。

1四、连接函数 Linking function

function link(scope, iElement, iAttrs, controller) { ... }
连接函数负责注册DOM事件和更新DOM。它是在模板被克隆以后执行的，它也是大部分指令逻辑代码编写的地方。
scope - 指令须要监听的做用域。
iElement - instance element - 指令所在的元素。只有在postLink函数中对元素的子元素进行操做才是安全的，由于那时它们才已经所有连接好。
iAttrs - instance attributes - 实例属性，一个标准化的、全部声明在当前元素上的属性列表，这些属性在全部连接函数间是共享的。
controller - 控制器实例，也就是当前指令经过require请求的指令direct2内部的controller。好比：direct2指令中的controller:function(){this.addStrength = function(){}}，那么，在当前指令的link函数中，你就能够经过controller.addStrength进行调用了。
Pre-linking function 在子元素被连接前执行。不能用来进行DOM的变形，以防连接函数找不到正确的元素来连接。
Post-linking function 全部元素都被连接后执行。

说明：

    compile选项自己并不会被频繁使用，可是link函数则会被常用。本质上，当咱们设置了link选项，其实是建立了一个postLink() 连接函数，以便compile() 函数能够定义连接函数。一般状况下，若是设置了compile函数，说明咱们但愿在指令和实时数据被放到DOM中以前进行DOM操做，在这个函数中进行诸如添加和删除节点等DOM操做是安全的。compile和link选项是互斥的。若是同时设置了这两个选项，那么会把compile所返回的函数看成连接函数，而link选项自己则会被忽略。译函数负责对模板DOM进行转换。连接函数负责将做用域和DOM进行连接。 在做用域同DOM连接以前能够手动操做DOM。在实践中，编写自定义指令时这种操做是很是罕见的，但有几个内置指令提供了这样的功能。 连接函数是可选的。若是定义了编译函数，它会返回连接函数，所以当两个函数都定义时，编译函数会重载连接函数。若是咱们的指令很简单，而且不须要额外的设置，能够从工厂函数（回调函数）返回一个函数来代替对象。若是这样作了，这个函数就是连接函数

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程