摘要：在運(yùn)用的時(shí)候，運(yùn)用自定義指令可以寫一些組件，非常方便。這里給大家分享一些關(guān)于自定義指令的知識(shí)。

在運(yùn)用angularjs的時(shí)候，運(yùn)用自定義指令可以寫一些組件，非常方便。這里給大家分享一些關(guān)于angular自定義指令的知識(shí)。

對(duì)于指令，可以把它簡(jiǎn)單的理解成在特定DOM元素上運(yùn)行的函數(shù)，指令可以擴(kuò)展這個(gè)元素 的功能。

angular.module("myApp", []) 
.directive("myDirective", function ($timeout, UserDefinedService) { 
    // 指令定義放在這里 
}); 

第一個(gè)參數(shù)，指令的名字myDirective 用來(lái)在視圖中引用特定的指令。
第二個(gè)參數(shù)是一個(gè)函數(shù)，這個(gè)函數(shù)返回一個(gè)對(duì)象，$compile服務(wù)利用這個(gè)方法返回的對(duì) 象，在DOM調(diào)用指令時(shí)來(lái)構(gòu)造指令的行為。

angular.module("myApp", []) 
.directive("myDirective", function() { 
    return { 
        restrict: String, 
        priority: Number, 
        terminal: Boolean, 
        template: String or Template Function: 
            function(tElement, tAttrs) (...}, 
        templateUrl: String, 
        replace: Boolean or String, 
        scope: Boolean or Object, 
        transclude: Boolean, 
        controller: String or  
        function(scope, element, attrs, transclude, otherInjectables) { ... }, 
        controllerAs: String, 
        require: String, 
        link: function(scope, iElement, iAttrs) { ... }, 
        compile: // 返回一個(gè)對(duì)象或連接函數(shù)，如下所示： 
            function(tElement, tAttrs, transclude) { 
                return { 
                    pre: function(scope, iElement, iAttrs, controller) { ... }, 
                    post: function(scope, iElement, iAttrs, controller) { ... } 
                } 
                // 或者 
                return function postLink(...) { ... } 
           } 
    }; }); 

restrict 指令在DOM中可以何種形式被引用或聲明

可選值如下： （ 可組合使用 ）

E（元素）
A（屬性，默認(rèn)值）

priority 優(yōu)先級(jí) 用來(lái)表示指令使用的優(yōu)先順序
如果一個(gè)元素上具有兩個(gè)優(yōu)先級(jí)相同的指令，聲明在前面的那個(gè)會(huì)被優(yōu)先調(diào)用。如果其中一 個(gè)的優(yōu)先級(jí)更高，則不管聲明的順序如何都會(huì)被優(yōu)先調(diào)用：具有更高優(yōu)先級(jí)的指令總是優(yōu)先運(yùn)行。

terminal 用來(lái)告訴AngularJS停止運(yùn)行當(dāng)前元素上比本指令優(yōu)先級(jí)低的指令。但同當(dāng)前指令 優(yōu)先級(jí)相同的指令還是會(huì)被執(zhí)行。

   

    這是自定義指令
   
    

var myCtr=["$scope",function($scope){}]
var app=angular.module("myApp",[]);
app.controller("myCtr",myCtr);
app.directive("directiveOne",function(){
return {
    restrict: "ECMA", 
    priority: 2, 
    terminal: true, 
    template:function(tElement, tAttrs){
        tElement[0].style.fontSize="18px"; //設(shè)置字體
    }
}
});
app.directive("directiveSec",function(){
return {
    restrict: "ECMA", 
    priority: 1, 
    template:function(tElement, tAttrs){
        tElement[0].style.color="red"; //設(shè)置顏色
    }
}
});

template
用來(lái)表示模板，可以是一段字符串，如“

這是自定義指令

template:function(tElement, tAttrs){
//tElement表示當(dāng)前元素，是一個(gè)數(shù)組，tAttrs表示該元素的屬性，是一個(gè)對(duì)象
   tElement[0].style.color="red"; //設(shè)置顏色
}

templateUrl 用來(lái)表示模板，與上面的template功能相似，但表示路徑，可以是外部HTML文件路徑的字符串也可以是一個(gè)可以接受兩個(gè)參數(shù)的函數(shù)，參數(shù)為tElement和tAttrs，并返回一個(gè)外部HTML文件 路徑的字符串。

replace 默認(rèn)為false，模板會(huì)被當(dāng)作子元素插入到調(diào)用此指令的元素內(nèi)部，為true，則直接替換此元素

 
.directive("someDirective", function() { 
return { 
    template: "
some stuff here
" 
}; }); 

 
some stuff here
 
 



.directive("someDirective", function() { 
return { 
    replace: true // 修飾過(guò) 
    template: "
some stuff here
" 
}; }); 

some stuff here
 

scope

（1）當(dāng)scope設(shè)置為true時(shí)，會(huì)從父作用域繼承并創(chuàng)建一個(gè)新的作用域?qū)ο蟆?（2） 默認(rèn)為false，并不會(huì)創(chuàng)建新的作用域?qū)ο?，直接使用父scope。
（3）設(shè)置為{}，表示隔離作用域，指令的 模板就無(wú)法訪問(wèn)外部作用域了

var myCtr=["$scope",function($scope){
    $scope.name="father controller?。?
}]
var app=angular.module("myApp",[]);
app.controller("myCtr",myCtr);
app.directive("directiveOne",function(){
    return {
        restrict:"ECMA",
        template: "
這是自定義指令{{name}}
",
        scope:{},
        controller:function($scope){
            console.log($scope.name);//打印出來(lái)為undefined，因?yàn)闊o(wú)法訪問(wèn)尾部作用域了
        }
    }
});

當(dāng)然，AngularJS提供了幾種方法能夠?qū)⒅噶顑?nèi)部的隔離作用域，同指令外部的作用域進(jìn)行數(shù)據(jù)綁定。
（a）@ (or @attr) 單向綁定，外部scope能夠影響內(nèi)部scope，但反過(guò)來(lái)不成立

（b）= (or =attr)  雙向綁定，外部scope和內(nèi)部scope的model能夠相互改變

    ![圖片描述][1]
    上面的輸入框輸入，下面會(huì)變，下面的輸入框輸入上面的也會(huì)變

    （c）& (or &attr)  把內(nèi)部scope的函數(shù)的返回值和外部scope的任何屬性綁定起來(lái)

controller
controller參數(shù)可以是一個(gè)字符串或一個(gè)函數(shù)。當(dāng)設(shè)置為字符串時(shí)，會(huì)以字符串的值為名字， 來(lái)查找注冊(cè)在應(yīng)用中的控制器的構(gòu)造函數(shù).當(dāng)為函數(shù)時(shí)，可以像平時(shí)寫控制器那樣寫，可以將任意可以被注入的AngularJS服務(wù)傳遞給控制器

controllerAs（字符串）
controllerAs參數(shù)用來(lái)設(shè)置控制器的別名，可以以此為名來(lái)發(fā)布控制器，并且作用域可以訪 問(wèn)controllerAs。這樣就可以在視圖中引用控制器，甚至無(wú)需注入$scope。

require
require參數(shù)可以被設(shè)置為字符串或數(shù)組，字符串代表另外一個(gè)指令的名字。require會(huì)將控 制器注入到其值所指定的指令中，并作為當(dāng)前指令的鏈接函數(shù)的第四個(gè)參數(shù)。

字符串或數(shù)組元素的值是會(huì)在當(dāng)前指令的作用域中使用的指令名稱。