AngularJs中的directive(一)

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

restrict

類型:(字符串)可選參數javascript

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

  • E(元素):<directiveName></directiveName>java

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

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

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

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>app

templateUrl

類型:(字符串或者函數),可選參數dom

  • 一個表明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

若是設置了transcludetrue的話,就會把本來指令標籤中用於寫的東西放置到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()() 纔是真正的執行這個方法。

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

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

更多文章請查閱個人博客

相關文章
相關標籤/搜索