學習AngularJs:Directive指令用法（完整版）_AngularJS

來源：懂視網責編：小采時間：2020-11-27 21:49:36

學習AngularJs:Directive指令用法（完整版）_AngularJS

學習AngularJs:Directive指令用法（完整版）_AngularJS:本教程使用AngularJs版本：1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下載地址：https://angularjs.org/ 摘要：Directive（指令）筆者認為是AngularJ非常強大而有有用的功能之一。它就相當于為我們寫了

推薦度：

點擊下載本文 文檔為doc格式

導讀學習AngularJs:Directive指令用法（完整版）_AngularJS:本教程使用AngularJs版本：1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下載地址：https://angularjs.org/ 摘要：Directive（指令）筆者認為是AngularJ非常強大而有有用的功能之一。它就相當于為我們寫了

本教程使用AngularJs版本：1.5.3

AngularJs GitHub: https://github.com/angular/angular.js/

AngularJs下載地址：https://angularjs.org/

摘要：Directive（指令）筆者認為是AngularJ非常強大而有有用的功能之一。它就相當于為我們寫了公共的自定義DOM元素或CLASS屬性或ATTR屬性，并且它不只是單單如此，你還可以在它的基礎上來操作scope、綁定事件、更改樣式等。通過這個Directive，我們可以封裝很多公共指令，比如分頁指令、自動補全指令等等。然后在HTML頁面里只需要簡單的寫一行代碼就可以實現很多強大的功能。一般情況下，需要用Directive有下面的情景：
1. 使你的Html更具語義化，不需要深入研究代碼和邏輯即可知道頁面的大致邏輯。
2. 抽象一個自定義組件，在其他地方進行重用。

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

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

directive-name="exp">//屬性 
 
directive-name: exp;">//class 
 
//元素 
 
//注釋

如下一個實例：

 
 
 
  
 AngularJS入門學習

輸出結果：

另一種辦法緩存是:

使用實例如下：

AngularJS入門學習

= 局部 scope 屬性

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

示例代碼：