angular.module("app",[]).directive("directiveName",function(){ return{ //經過設置項來定義 }; })
類型:(字符串)可選參數javascript
取值有:E
(元素),A
(屬性),C
(類),M
(註釋),其中默認值爲A
;html
E
(元素):<directiveName></directiveName>
java
A
(屬性):<div directiveName='expression'></div>
git
C
(類):<div class='directiveName'></div>
github
M
(註釋):<-- directive:directiveName expression-->
express
類型:(字符串或者函數)可選參數緩存
var myModule = angular.module("MyModule", []); myModule.directive("hello", function() { return { restrict: 'AEMC', template: '<div>Hi everyone!</div>', replace: true } });
HTML代碼爲:<hello></hello>
服務器
angular.module("app",[]).directive("directitle",function(){ return{ restrict:'EAC', template: function(tElement,tAttrs){ var _html = ''; _html += '<div>'+tAttrs.title+'</div>'; return _html; } }; })
HTML代碼爲:<directitle title="biaoti"></directitle>
app
類型:(字符串或者函數),可選參數dom
一個表明HTML文件路徑的字符串
一個函數,可接受兩個參數tElement和tAttrs(大體同上)
var myModule = angular.module("MyModule", []); }]) myModule.directive("hello", function() { return { restrict: 'AECM', templateUrl: 'hello-tpl.html', replace: true } });
注意:在本地開發時候,須要運行一個服務器,否則使用templateUrl會報錯
因爲加載html模板是經過異步加載的,若加載大量的模板會拖慢網站的速度,這裏有個技巧,就是先緩存模板。
var myModule = angular.module("MyModule", []); //注射器加載完全部模塊時,此方法執行一次 myModule.run(function($templateCache){ //使用內置的方法緩存起來 $templateCache.put("hello.html","<div>Hello everyone!!!!!!</div>"); }); myModule.directive("hello", function($templateCache) { return { restrict: 'AECM', //使用get方法獲取 template: $templateCache.get("hello.html"), replace: true } });
類型:(布爾值),默認值爲false
若是設置repace:true的話,就會隱藏掉對於指令命名的html標籤
相似<hello></hello>若是replace設置爲true的話,就會消失不顯示。
var myModule = angular.module("MyModule", []); myModule.directive("hello", function() { return { restrict:"AE", template:"<div>Hello everyone!</div>", //能夠嵌套,默認爲false replace:true } });
HTML代碼爲:<hello></hello>
渲染以後的代碼:<div><h3>hello world</h3></div>
對比下沒有開啓replace
時候的渲染出來的HTML。發現<hello></hello>
不見了。
類型:(布爾值或者字符element
),默認值爲false
;
若是設置了transclude
爲true
的話,就會把本來指令標籤中用於寫的東西放置到ng-transclude
中去。
var myModule = angular.module("MyModule", []); myModule.directive("hello", function() { return { restrict:"AE", transclude:true, template:"<div>Hello everyone!<div ng-transclude></div></div>" } });
HTML代碼爲:
<hello> <div>這裏是指令內部的內容。</div> </hello>
注意:在一個指令的模板template上只能申明一個ng-transclude。
若是咱們想把嵌入部分屢次放入咱們的模板中要怎麼辦?則能夠在link
或者controller
裏面添加一個參數$transclude
。
link:function($scope,$element,$attrs,controller,$transclude){ // clone 參數就是用戶輸入進去的內容。 $transclude(function(clone){ // 進行其餘操做。 }); }
var app = angular.module('app',[]); app.directive('myLink',function(){ return { restrict:'EA', transclude:true, controller:function($scope,$element,$attrs,$transclude){ $transclude(function(clone){ var a = angular.element('<a>'); a.attr('href',$attrs.value); a.attr('target',$attrs.target); a.text(clone.text()); $element.append(a); }) } } })
HTML代碼爲:
<div my-link value=" target="_blank">百度</div>
有時候咱們要嵌入指令元素自己,而不單單是他的內容,這種狀況下,咱們須要使用transclude:"element"
,和transclude:true
不一樣,他講標記了ng-transclude
指令的元素一塊兒包含到了指令模板中,使用transclusion
, 你的link
函數會獲取到一個叫transclude
的連接函數,這個函數綁定了正確的指令scope
,而且傳入了另一個擁有被嵌入dom元素拷貝的函數,你能夠在這個transclude
函數中執行好比修改元素拷貝或者將他添加到dom上等操。
類型:可選參數,(布爾值或者對象)
默認值false,表示繼承父做用域(兒子繼承父親的值,改變父親的值,兒子的值也隨之變化,反之亦如此);
true,表示繼承父做用域,並建立本身的做用域(子做用域)(兒子繼承父親的值,改變父親的值,兒子的值隨之變化,可是改變兒子的值,父親的值不變);
{},表示建立一個全新的隔離做用域(沒有繼承父親的值,因此兒子的值爲空,改變任何一方的值均不能影響另外一方的值);
爲了讓隔離做用域能讀取父做用域的屬性,產生了綁定策略:
var app = angular.module('myApp',[]); app.controller('MainController',function(){}); app.directive('helloWorld',function(){ return { scope: {color:'@colorAttr'}, //指明瞭隔離做用域中的屬性color應該綁定到屬性colorAttr restrict: 'AE', replace: true, template: '<p style="background-color:{{color}}">Hello World</p>' } });
HTML代碼爲:<hello-world color-attr='{{color}}'></hello-world>
這種辦法只能單向,經過在運行的指令的那個html標籤上設置color-attr
屬性,而且採用雙層花括號綁定某個模型值。
提示:若是綁定的隔離做用域屬性名與元素的屬性名相同,則能夠採起缺省寫法。
HTML代碼爲:
<hello-world color="{{color}}"/></hello-world>
js定義指令的片斷:
app.directive('helloWorld',function(){ return { scope: { color: '@' }, ... //配置的餘下部分 } });
var app = angular.module('myApp',[]); app.controller('MainController',function(){}); app.directive('helloWorld',function(){ return { scope:{color:'='}, restrict: 'AE', replace: true, template: '<div style="background-color:{{color}}">Hello World<div><input type="text" ng-model="color"></div></div>' } });
HTML代碼爲:
<input type="text" ng-model="color" placeholder="Enter a color"/> {{color}} <hello-world color='color'></hello-world>
var myModule = angular.module("MyModule", []); myModule.controller('MyCtrl', ['$scope', function($scope){ $scope.sayHello = function(name){ alert("Hello " + name); } }]) myModule.directive("greeting", function() { return { restrict:'AE', scope:{ greet:'&' }, template:'<input type="text" ng-model="userName" /><br/>'+ '<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>' } });
HTML代碼爲:
<greeting greet="sayHello(name)"></greeting>
備註:
& 父級做用域: 傳遞進來的參數必須是父級的函數方法, 而後在指令中,經過 test() 獲取到 傳遞進來的函數,這個還不夠,還必須再執行一次 test()() 纔是真正的執行這個方法。
@ 本地做用域: 只能傳遞字符串進來,對於方法或者對象是傳遞不進來的。
= 雙向屬性: 能夠傳遞對象進來,也能夠是字符串,可是不能傳遞方法。 同時能夠在指令中修改這個對象,父級裏面的這個對象也會跟着修改的。
更多文章請查閱個人博客