angularjs 指令（directive）詳解(1)

時間 2020-08-18

標籤 angularjs 指令 directive 詳解欄目 AngularJS 简体版

原文原文鏈接

什麼是directive？咱們先來看一下官方的解釋： angularjs

At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS'sHTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children. bootstrap

Angular comes with a set of these directives built-in, like ngBind, ngModel, and ngClass. Much like you create controllers and services, you can create your own directives for Angular to use. When Angular bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements. api

像ngBind，ngModel和ngClass等指令都是angular內置的directive，當咱們感受這些directive不能知足咱們的要求時，則能夠本身動手建立directive。瀏覽器

咱們定義的directive通常使用camelCase（駝峯）命名規則，可是因爲HTML是不區分大小寫的，因此咱們的directive在DOM中只能使用小寫，可使用如下幾種方式來表示：緩存

例如ngBind能夠表示爲如下幾種方式： app

  <span ng-bind="name"></span> <br/>
  <span ng:bind="name"></span> <br/>
  <span ng_bind="name"></span> <br/>
  <span data-ng-bind="name"></span> <br/>
  <span x-ng-bind="name"></span> <br/>

但咱們通常經常使用下劃線來表示，如：ng-bing異步

瞭解完指令的定義，那麼接下來咱們學習如何本身建立一個指令。 ide

一.directive的寫法以及參數說明：學習

angular.module("app",[])
 .directive("directive",function(){
    return{
     	restrict:"EACM", //指明指令在DOM中以什麼樣的形式被聲明
		priority:0, //該指令的執行優先級
		terminal:true/false, //是不是最後一組執行的directive。
		template:"<div></div>", //模板
		template:"**/**.html", //指定模板的url
		replace:true/false,  //替換或拼接到當前元素
		transclude:true/false/'element', //將內容編譯後放入指定地方
		scope:true/false/{}, //建立一個新的做用域
		require:[],  //請求其餘directive的controller
		controller:function/controllerName, //建立一個控制器，可與其餘              .                                                    directive共享
		link:function, //操控DOM元素
		compile:function, //經過表示服修改DOM模板
    };
})

二.directive返回參數詳解

1.restrict

可選參數，指明指令在DOM裏面以什麼形式被聲明，默認爲A(屬性)；

E(元素)：<directive></directive>

A(屬性)：<div directive='name'></div>

C(類)： <div class='directive'></div>

M(註釋)：<–directive:directive name–>

2.priority

可選參數，指明指令的優先級，若在單個DOM上有多個指令，則優先級高的先執行，若是優先級相同，則執行順序是不肯定的。

3.terminal

可選參數，能夠被設置爲true或false，若設置爲true，則表示當前的priority將會成爲最後一組執行的directive。任何directive與當前的優先級相同的話，他們依然會執行，但順序是不肯定。優先級低於此指令的其餘指令則無效，不會被調用。

4.template

可選參數，html代碼，以下所示，

//js代碼
angular.module("app",[])
 .directive("hello",function(){
	return{
		restrict:'EA',
		template:"<div>templateUrl</div>"
	};
 })
//html代碼
<div>
	<hello></hello>
</div>

則輸出結果是：

templateUrl

5.templateUrl

可選參數，與template基本一致，但模版經過指定的url進行加載。由於模版加載是異步的，因此compilation、linking都會暫停，等待加載完畢後再執行。

因爲加載html模板是經過異步加載的，若加載大量的模板會拖慢網站的速度，能夠先緩存模板來提升速度（可使用ng-template或$templateCache來緩存模板，詳細用法在這裏很少說，請自行查詢）

6.replace

可選參數，默認爲false。若是設置爲true，那麼模版將會替換當前元素，不然做爲子元素添加到當前元素中。

當設爲true時：

//js代碼
angular.module("app",[])
 .directive("hello",function(){
	return{
		restrict:'EA',
		replace：true,
		template:"<div>templateUrl</div>"
	};
 })
//html代碼
<div>
	<hello></hello>
</div>

那麼渲染以後的代碼爲：

 <div>
	<div>templateUrl</div>
</div>

能夠看到，<hello></hello>已經被<div>templateUrl</div>這個標籤替換掉了。

仍是以上代碼，若是設爲false或不設值時，渲染以後的代碼爲：

<div>
	<hello>
		<div>templateUrl</div>
	</hello>
</div>

能夠本身比較一下true和false的區別。

7.transclude

可選參數，默認值爲fasle。

指令的做用是把咱們自定義的語義化標籤替換成瀏覽器可以認識的HTML標籤。那麼，若是咱們自定義的標籤內部出現了子標籤，應該如何去處理呢？

transclude可讓咱們提取包含在指令那個元素裏面的內容，再將它放置在指令模板的特定位置。咱們可使用ng-transclude來指明瞭應該在什麼地方放置transcluded內容。

看以下代碼：

 <!doctype html>
<html ng-app="myApp">
<head>
  <script src="angular.min.js"></script>
</head>
<body>

  <div ng-controller='controller'>
  	<hello>
       {{text}}
    </hello>
	<hello></hello>
  </div>

  <script>
    var app = angular.module('myApp',[]);
    app.controller('controller',function($scope){
      $scope.text = 'I am transclude';
    });
    app.directive('hello',function(){
     return {
        scope:{},  
        restrict: 'AE',
        transclude: true,
        template: '<div ng-transclude>hello world</div>'
     }
    });
  </script>
</body>
</html>

上邊代碼的輸出結果是：