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

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

對于指令，可以把它簡單的理解成在特定DOM元素上運行的函數，指令可以擴展這個元素 的功能。

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

第一個參數，指令的名字myDirective 用來在視圖中引用特定的指令。
第二個參數是一個函數，這個函數返回一個對象，$compile服務利用這個方法返回的對 象，在DOM調用指令時來構造指令的行為。

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: // 返回一個對象或連接函數，如下所示： 
            function(tElement, tAttrs, transclude) { 
                return { 
                    pre: function(scope, iElement, iAttrs, controller) { ... }, 
                    post: function(scope, iElement, iAttrs, controller) { ... } 
                } 
                // 或者 
                return function postLink(...) { ... } 
           } 
    }; }); 

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

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

E（元素）
A（屬性，默認值）

priority 優先級 用來表示指令使用的優先順序
如果一個元素上具有兩個優先級相同的指令，聲明在前面的那個會被優先調用。如果其中一 個的優先級更高，則不管聲明的順序如何都會被優先調用：具有更高優先級的指令總是優先運行。

terminal 用來告訴AngularJS停止運行當前元素上比本指令優先級低的指令。但同當前指令 優先級相同的指令還是會被執行。

   

    這是自定義指令
   
    

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"; //設置字體
    }
}
});
app.directive("directiveSec",function(){
return {
    restrict: "ECMA", 
    priority: 1, 
    template:function(tElement, tAttrs){
        tElement[0].style.color="red"; //設置顏色
    }
}
});

template
用來表示模板，可以是一段字符串，如“

這是自定義指令

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

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

replace 默認為false，模板會被當作子元素插入到調用此指令的元素內部，為true，則直接替換此元素

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

 
some stuff here
 
 



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

some stuff here
 

scope

（1）當scope設置為true時，會從父作用域繼承并創建一個新的作用域對象。
（2） 默認為false，并不會創建新的作用域對象，直接使用父scope。
（3）設置為{}，表示隔離作用域，指令的 模板就無法訪問外部作用域了

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);//打印出來為undefined，因為無法訪問尾部作用域了
        }
    }
});

當然，AngularJS提供了幾種方法能夠將指令內部的隔離作用域，同指令外部的作用域進行數據綁定。
（a）@ (or @attr) 單向綁定，外部scope能夠影響內部scope，但反過來不成立

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

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

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

controller
controller參數可以是一個字符串或一個函數。當設置為字符串時，會以字符串的值為名字， 來查找注冊在應用中的控制器的構造函數.當為函數時，可以像平時寫控制器那樣寫，可以將任意可以被注入的AngularJS服務傳遞給控制器

controllerAs（字符串）
controllerAs參數用來設置控制器的別名，可以以此為名來發布控制器，并且作用域可以訪 問controllerAs。這樣就可以在視圖中引用控制器，甚至無需注入$scope。

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

字符串或數組元素的值是會在當前指令的作用域中使用的指令名稱。