本教程使用AngularJs版本：1.5.3

摘要：Directive(指令)筆者認為是AngularJ非常強大而有有用的功能之一。它就相當于為我們寫了公共的自定義DOM元素或CLASS屬性或ATTR屬性，并且它不只是單單如此，你還可以在它的基礎上來操作scope、綁定事件、更改樣式等。通過這個Directive，我們可以封裝很多公共指令，比如分頁指令、自動補全指令等等。然后在HTML頁面里只需要簡單的寫一行代碼就可以實現很多強大的功能。一般情況下，需要用Directive有下面的情景：

1. 使你的Html更具語義化，不需要深入研究代碼和邏輯即可知道頁面的大致邏輯。

2. 抽象一個自定義組件，在其他地方進行重用。

一、Directive的定義及其使用方法AngularJs的指令定義大致如下

angular.module("app",[]).directive("directiveName",function(){

return{

//通過設置項來定義

};

})

Directive可以放置于元素名、屬性、class、注釋中。下面是引用myDir這個directive的等價方式。(但很多directive都限制為“屬性”的使用方式)

directive-name="exp">//屬性

directive-name: exp;">//class

<directive-name>directive-name>//元素

//注釋

如下一個實例 ：

AngularJS入門學習

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

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

return {

restrict: 'E',

template: '

Hi 我是林炳文~~~',

replace: true

};

});

結果：

下面是一個directive的詳細版

var myModule = angular.module(...);

myModule.directive('directiveName', function factory(injectables) {

var directiveDefinitionObject = {

priority: 0,

template: '

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;

});

二、Directive指令內容解讀可 以看到它有8個內容

1.restrict

(字符串)可選參數，指明指令在DOM里面以什么形式被聲明；取值有：E(元素),A(屬性),C(類),M(注釋)，其中默認值為A；當然也可以兩個一起用，比如EA.表示即可以是元素也可以是屬性。

[html] view plain copy 在CODE上查看代碼片派生到我的代碼片

E(元素)：

A(屬性)：

C(類)：

M(注釋)：

一般情況下E/A/C用得比較多。

2.priority(數字)，可選參數，指明指令的優先級，若在單個DOM上有多個指令，則優先級高的先執行；

3.terminal(布爾型)，可選參數，可以被設置為true或false，若設置為true，則優先級低于此指令的其他指令則無效，不會被調用(優先級相同的還是會執行)

4.template(字符串或者函數)可選參數，可以是：(1)一段HTML文本

AngularJS入門學習

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

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

return {

restrict: 'E',

template: '

Hi 我是林炳文~~~

',

replace: true

};

});

(2)一個函數，可接受兩個參數tElement和tAttrs

其中tElement是指使用此指令的元素，而tAttrs則實例的屬性，它是一個由元素上所有的屬性組成的集合(對象)形如：

其中title就是tattrs上的屬性

下面讓我們看看template是一個函數時候的情況

AngularJS入門學習

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

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

return {

restrict: 'E',

template: '

Hi 我是林炳文~~~

',

replace: true

};

});

app.directive("helloWorld2",function(){

return{

restrict:'EAC',

template: function(tElement,tAttrs){

var _html = '';

_html += '

' +'hello '+tAttrs.title+'';

return _html;

}

};

});

結果：

可以看到指令中還用到了hello-world2中的標簽中的 title字段

5.templateUrl(字符串或者函數)，可選參數，可以是(1)一個代表HTML文件路徑的字符串

(2)一個函數，可接受兩個參數tElement和tAttrs(大致同上)

注意：在本地開發時候，需要運行一個服務器，不然使用templateUrl會報錯 Cross Origin Request Script(CORS)錯誤。由于加載html模板是通過異步加載的，若加載大量的模板會拖慢網站的速度，這里有個技巧，就是先緩存模板

你可以再你的index頁面加載好的，將下列代碼作為你頁面的一部分包含在里面。

Hi 我是林炳文~~~

這里的id屬性就是被設置在templateUrl上用的。

AngularJS入門學習

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

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

return {

restrict: 'E',

templateUrl: 'hello.html',

replace: true

};

});

Hi 我是林炳文~~~

輸出結果：

另一種辦法緩存是:

app.run(["$templateCache", function($templateCache) {

$templateCache.put("hello.html",

"

Hi 我是林炳文~~~

");

}]);

使用實例如下：

AngularJS入門學習

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",

"

Hi 我是林炳文~~~

");

}]);

結果：

其實第一種方法還好一些，寫起來會比較快，筆者就得最多的也是第一種寫法，直接包在scprit當中

6.replace

(布爾值)，默認值為false，設置為true時候，我們再來看看下面的例子(對比下在template時候舉的例子)

replace為true時，hello-world這個標簽不在了，反之，則存在。

7.scope

(1)默認值false。表示繼承父作用域;

(2)true。表示繼承父作用域，并創建自己的作用域(子作用域);

(3){}。表示創建一個全新的隔離作用域；

7.1首先我們先來了解下scope的繼承機制。我們用ng-controller這個指令舉例，

AngularJS入門學習

父親:{{name}}

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

app.controller('MainController', function ($scope) {

$scope.name = '林炳文';

});

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

return {

restrict: 'EA',

scope:false,

template: '

兒子:{{ name }}'

};

});

接下來我們通過一個簡單明了的例子來說明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 無法同步更新值。

js 代碼：

AngularJS入門學習父scope：Say：{{name}}
改變父scope的name：隔離scope：隔離scope(不使用父scope {{name}})：

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

app.controller("myController", function ($scope) {

$scope.name = "hello world";

}).directive("isolatedDirective", function () {

return {

scope: {

name: "@"

},

template: 'Say：{{name}}
改變隔離scope的name：'

};

});

結果：頁面初始效果

動畫效果：

可以看到父scope上的內容發生改變，子scope同時發生改變。而子scope上的內容發生改變。不影響父scope上的內容！

= 局部 scope 屬性

= 通過 directive 的 attr 屬性的值在局部 scope 的屬性和父 scope 屬性名之間建立雙向綁定。

意思是，當你想要一個雙向綁定的屬性的時候，你可以使用=來引入外部屬性。無論是改變父 scope 還是隔離 scope 里的屬性，父 scope 和隔離 scope 都會同時更新屬性值，因為它們是雙向綁定的關系。

示例代碼：

AngularJS入門學習父scope：Say：{{user.name}}
改變父scope的name：隔離scope：

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}}
改變隔離scope的name：'

}

})

效果：

可以看到父scope和子scope上的內容一直都是一樣的！

& 局部 scope 屬性

& 方式提供一種途經是 directive 能在父 scope 的上下文中執行一個表達式。此表達式可以是一個 function。

比如當你寫了一個 directive，當用戶點擊按鈕時，directive 想要通知 controller，controller 無法知道 directive 中發生了什么，也許你可以通過使用 angular 中的 event 廣播來做到，但是必須要在 controller 中增加一個事件監聽方法。

最好的方法就是讓 directive 可以通過一個父 scope 中的 function，當 directive 中有什么動作需要更新到父 scope 中的時候，可以在父 scope 上下文中執行一段代碼或者一個函數。

如下示例在 directive 中執行父 scope 的 function。

AngularJS入門學習父scope：Say：{{value}}隔離scope：

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: ''

}

})

效果：

指令的內容比較多，下面再來講講transclude、compline、link、contrller

8.transclude

如果不想讓指令內部的內容被模板替換，可以設置這個值為true。一般情況下需要和ngTransclude指令一起使用。 比如：template:"

hello every "，這時，指令內部的內容會嵌入到ng-transclude這個div中。也就是變成了hello every 這是指令內部的內容。默認值為false；這個配置選項可以讓我們提取包含在指令那個元素里面的內容，再將它放置在指令模板的特定位置。當你開啟transclude后，你就可以使用ng-transclude來指明了應該在什么地方放置transcluded內容AngularJS入門學習

• First link
• Second link

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

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

return {

restrict: 'EA',

scope: {

title: '@'

},

transclude: true,

template: '

\\

{{ title }}

\

\

\

\'

};

});

總結

以上是生活随笔為你收集整理的angularjs directive scope变化为啥html,学习AngularJs:Directive指令用法（完整版）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。