AngularJs:Directive指令用法

時間 2019-11-12

標籤 angularjs directive 指令用法欄目 AngularJS 简体版

原文原文鏈接

摘自：http://www.jb51.net/article/83051.htmjavascript

摘要：Directive（指令）是AngularJ很是強大而有有用的功能之一。它就至關於爲咱們寫了公共的自定義DOM元素或CLASS屬性或ATTR屬性，而且它不僅是單單如此，你還能夠在它的基礎上來操做scope、綁定事件、更改樣式等。經過這個Directive，咱們能夠封裝不少公共指令，好比分頁指令、自動補全指令等等。而後在HTML頁面裏只須要簡單的寫一行代碼就能夠實現不少強大的功能。通常狀況下，須要用Directive有下面的情景：
1. 使你的Html更具語義化，不須要深刻研究代碼和邏輯便可知道頁面的大體邏輯。
2. 抽象一個自定義組件，在其餘地方進行重用。html

1、Directive的定義及其使用方法
AngularJs的指令定義大體以下java

angular.module("app",[]).directive("directiveName",function(){ 
 return{ 
 //經過設置項來定義 
 }; 
})

Directive能夠放置於元素名、屬性、class、註釋中。下面是引用myDir這個directive的等價方式。（但不少directive都限制爲「屬性」的使用方式）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 factory(injectables) { 
 return  { 
 　　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) { ... } 
}; 
}); 
</script> 
</html>

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上有多個指令，則優先級高的先執行；服務器

3.terminal
（布爾型），可選參數，能夠被設置爲true或false，若設置爲true，則優先級低於此指令的其餘指令則無效，不會被調用(優先級相同的仍是會執行)app

4.template（字符串或者函數）可選參數，能夠是：
（1）一段HTML文本異步

（2）一個函數，可接受兩個參數tElement和tAttrs
其中tElement是指使用此指令的元素，而tAttrs則實例的屬性，它是一個由元素上全部的屬性組成的集合（對象）形如：
<hello-world2 title = '我是第二個directive'></hello-world2>
其中title就是tattrs上的屬性函數

能夠看到指令中還用到了hello-world2中的標籤中的 title字段post

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上用的。

6.replace
（布爾值），默認值爲false，設置爲true時候，HTML中 hello-world這個標籤不在了，反之，則存在

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

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

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

詳細請參見

AngularJS 指令的 Scope (做用域)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。