AngularJs中的directive（一）

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

restrict

類型：（字符串）可選參數

取值有：E(元素),A(屬性),C(類),M(註釋)，其中默認值爲A；

• E(元素)：<directiveName></directiveName>

• A(屬性)：<div directiveName='expression'></div>

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

• M(註釋)：<-- directive:directiveName expression-->

template

類型：（字符串或者函數）可選參數

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>

templateUrl

類型：（字符串或者函數），可選參數

• 一個表明HTML文件路徑的字符串

• 一個函數，可接受兩個參數tElement和tAttrs（大體同上）

var myModule = angular.module("MyModule", []);
}])
myModule.directive("hello", function() {
    return {
        restrict: 'AECM',
        templateUrl: 'hello-tpl.html',
        replace: true
    }
});

注意：在本地開發時候，須要運行一個服務器，否則使用templateUrl會報錯

templateCache

因爲加載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
    }
});

replace

類型：（布爾值），默認值爲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>不見了。

transclude

類型：（布爾值或者字符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 的區別

有時候咱們要嵌入指令元素自己，而不單單是他的內容，這種狀況下，咱們須要使用transclude:"element",和transclude:true不一樣，他講標記了ng-transclude指令的元素一塊兒包含到了指令模板中，使用transclusion， 你的link函數會獲取到一個叫transclude的連接函數，這個函數綁定了正確的指令scope，而且傳入了另一個擁有被嵌入dom元素拷貝的函數，你能夠在這個transclude函數中執行好比修改元素拷貝或者將他添加到dom上等操。

scope

類型：可選參數，（布爾值或者對象）

• 默認值false，表示繼承父做用域（兒子繼承父親的值，改變父親的值，兒子的值也隨之變化，反之亦如此）;

• true，表示繼承父做用域，並建立本身的做用域（子做用域）（兒子繼承父親的值，改變父親的值，兒子的值隨之變化，可是改變兒子的值，父親的值不變）;

• {}，表示建立一個全新的隔離做用域（沒有繼承父親的值，因此兒子的值爲空，改變任何一方的值均不能影響另外一方的值）；

爲了讓隔離做用域能讀取父做用域的屬性，產生了綁定策略：

使用@（@attr）來進行單向文本（字符串）綁定

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: '@'  
     },  
     ...  
     //配置的餘下部分  
 }  
});

使用=（=attr）進行雙向綁定

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()() 纔是真正的執行這個方法。

• @ 本地做用域： 只能傳遞字符串進來，對於方法或者對象是傳遞不進來的。

• = 雙向屬性： 能夠傳遞對象進來，也能夠是字符串，可是不能傳遞方法。 同時能夠在指令中修改這個對象，父級裏面的這個對象也會跟着修改的。

更多文章請查閱個人博客