摘要：方法三使用調(diào)用父作用域中的函數(shù)實(shí)例地址同樣采用了缺省寫法，運(yùn)行之后，彈出窗口布爾值或者字符，默認(rèn)值為這個(gè)配置選項(xiàng)可以讓我們提取包含在指令那個(gè)元素里面的內(nèi)容，再將它放置在指令模板的特定位置。

準(zhǔn)備代碼，會(huì)在實(shí)例中用到

var app = angular.module("app", []);

angular指令定義大致如下

app.directive("directiveName", function() {
  return {
    // config
  }
})

其中return返回的配置對(duì)象包含很多參數(shù)，如下一一說(shuō)明。

值為字符串，可選參數(shù)，指明指令在DOM中以什么形式被聲明

默認(rèn)值為restrict: "EA"，表示可以在DOM里面可以用元素形式和屬性形式被聲明。一般來(lái)說(shuō)，如果你想創(chuàng)建一個(gè)自己模板的組件時(shí)，則使用元素形式，但是僅僅是為已有元素添加功能的話，就使用屬性名。

如果想要支持IE8，則最好使用屬性和類形式來(lái)定義，另外從angular 1.3.X開始，已經(jīng)放棄支持IE8了。

數(shù)字，可選參數(shù)，致命指令的優(yōu)先級(jí)，若在單個(gè)DOM元素上有多個(gè)指令，則優(yōu)先級(jí)高的先執(zhí)行。

當(dāng)然，設(shè)置指令的優(yōu)先級(jí)不太常用，但是比較特殊的例子是，內(nèi)置指令ng-repeat的優(yōu)先級(jí)為1000，而ng-init的優(yōu)先級(jí)為 450。

布爾型，可選參數(shù)，可以被設(shè)置為true或者false，若設(shè)置為true，則優(yōu)先級(jí)低于此指令的其他指令則無(wú)效，不會(huì)被調(diào)用優(yōu)先級(jí)相同任然會(huì)執(zhí)行。

字符串或者函數(shù)，可選參數(shù)。

可以是一段html文本

app.directive("hello", function() {
  return {
    template: "
Hello, world!
"
  }
})

使用如下

渲染結(jié)果為

  

    
Hello, world!
  

也可以是一個(gè)函數(shù)，可接受兩個(gè)參數(shù)Element與Attrs

其中Element是指使用此指令的元素，而Attrs則是實(shí)例的屬性，它是由一個(gè)元素上所有屬性組成的集合，形如

{
  title: "test",
  id: "testDiv",
  class: "demo",
  input: "text",
  ...
}

下面讓我們看看template是一個(gè)函數(shù)時(shí)的情況

app.directive("hello", function() {
  return {
    template: function(element, attrs) {
      return "
"+ attrs.title +"
"
    }
  };
});

html代碼

渲染結(jié)果

  
message

實(shí)例地址

布爾型，默認(rèn)值為false，設(shè)置為true的時(shí)候，表示可以用模板內(nèi)容替換自定義的元素標(biāo)簽。

在template的例子中，我們發(fā)現(xiàn)渲染結(jié)果中包含有自定義的元素，很顯然，這并不是我們想要的渲染結(jié)果，因此將replace設(shè)置為true之后，hello標(biāo)簽將會(huì)消失

app.directive("hello", function() {
  return {
    replace: true,
    template: function(element, attrs) {
      return "
"+ attrs.title +"
"
    }
  };
});

渲染結(jié)果如下，hello標(biāo)簽消失不見

message

字符串或者函數(shù)，可選參數(shù)

可以使一個(gè)代表html文件路徑的字符串，也可以是一個(gè)函數(shù)，大致意思與template一樣。

在本地開發(fā)時(shí)，需要運(yùn)行一個(gè)服務(wù)器，不然使用templateUrl會(huì)報(bào)錯(cuò)

Cross origin request script(cors)

由于加載html模板是通過異步加載，若加載大量的模板會(huì)拖慢網(wǎng)站的速度，這里有一個(gè)技巧，就是先緩存模板，你可以先在你的index頁(yè)面加載好，將下列代碼作為你頁(yè)面的一部分包含在內(nèi)

這里的id屬性就是被設(shè)置在templateUrl上用的

另外一種方法緩存如下

app.run(function($templateCache) {
  $templateCache.put("template.html", "
template
");
})

布爾值或者對(duì)象，可選參數(shù)，默認(rèn)值為false，表示繼承父級(jí)作用域。

如果值為true，表示繼承父作用域，并創(chuàng)建自己的作用域（子作用域）

如果為對(duì)象，{}，則表示創(chuàng)建一個(gè)全新的隔離作用域。

首先我們需要來(lái)了解一下scope的繼承機(jī)制。我們使用ng-controller這個(gè)指令來(lái)舉例。我們都知道ng-controller可以從父作用域中繼承并創(chuàng)建一個(gè)新的子作用域。如下：

    parentNode: {{aaa}}
    
    

        childrenNode: {{aaa}}
    

angular.module("app", [])
.controller("demoController", function($scope) {
    $scope.aaa = "children";
})

實(shí)例地址

這時(shí)頁(yè)面的顯示結(jié)果為

parentNode: parent
childrenNode: children

當(dāng)時(shí)當(dāng)我們并沒有在demoController的作用域中給aaa賦值，也就是在上例中刪除這一句$scope.aaa = "children";，那么執(zhí)行結(jié)果就為

parentNode: parent
childrenNode: parent

注意：如果一個(gè)元素上有多個(gè)指令都使用了隔離作用域，那么只有其中一個(gè)可以生效，只有指令模板中的根元素才能獲得一個(gè)新的作用域，這時(shí)候，scope就被設(shè)置為true了。

    parentNode: {{aaa}}
    
    

        childrenNode: {{aaa}}
        
        

            lastNode: {{aaa}}
        
    

angular.module("app", [])
.controller("demoController01", function($scope) {
    $scope.aaa = "children";
})
.controller("demoController02", function($scope) {
    $scope.aaa = "last"
})

實(shí)例地址

接下來(lái)，我們通過一個(gè)簡(jiǎn)單明了的例子來(lái)說(shuō)明scope取值的不同差別

    parent: {{ name }} 
    

    
    

angular.module("app", [])
.controller("mainController", function($scope) {
    $scope.name = "Jake";
})
.directive("myDirective", function() {
    return {
        restrict: "EA",
        scope: false,
        replace: true,
        template: "" +
            "
" +
                "childNode: {{ name }} " +
                "
" +
                "" +
            "
"
    }
})

實(shí)例地址

點(diǎn)擊上面的實(shí)例地址，我們可以依次改變scope的值為false, true, {}，結(jié)果發(fā)現(xiàn)

false：兒子繼承父親的值，改變父親的值，兒子的值也隨著改變，反之亦然，這就是繼承且不隔離

true：兒子繼承父親的值，改變父親的值，兒子的值也隨著改變，但是改變兒子的值，父親的值并沒有改變，這就是繼承但是隔離

{}：沒有繼承父親的值，所以兒子的值為空，改變?nèi)魏我环降闹刀疾粫?huì)影響另一方，這就是不繼承且隔離

當(dāng)想要?jiǎng)?chuàng)建一個(gè)可重用的組件時(shí)，隔離作用域是一個(gè)很好的選擇，通過隔離作用域，我們可以確保指令是獨(dú)立的，并且可以輕松的插入到任何HTML APP中，并且這種做法防止了父作用域被污染。

隔離作用域可以通過綁定策略來(lái)訪問父作用域的屬性

我們來(lái)看一個(gè)例子

angular.module("app", [])
.controller("mainController", function($scope) {
})
.directive("helloWorld", function() {
    return {
        restrict: "EA",
        scope: false,
        replace: true,
        template: "
Hello world!
"
    }
})

運(yùn)行上面的代碼，我們?cè)趇nput中輸入顏色值，比如red，那么hello world一行的背景就會(huì)變成紅色。動(dòng)手試試！

實(shí)例地址

但是，當(dāng)我們將scope的值設(shè)置為{}時(shí)，再次運(yùn)行代碼就發(fā)現(xiàn)頁(yè)面并不能成功的完整顯示了.這是因?yàn)閧}讓helloWorld指令產(chǎn)生了隔離作用域，沒辦法從父級(jí)作用域中繼承到color的值了。

所以在template中的{{color}}變成了依賴于自己的作用域，而不是依賴于父級(jí)作用域。因此我們需要一些辦法來(lái)讓隔離作用域能夠讀取父級(jí)作用域的屬性，這個(gè)方法就是綁定策略。

下面我們來(lái)探索設(shè)置這種綁定策略的幾種方法

方法一 使用@來(lái)進(jìn)行單向文本（字符串）綁定

angular.module("app", [])
.controller("mainController", function($scope) {
})
.directive("helloWorld", function() {
    return {
        restrict: "EA",
        scope: {
            color: "@colorAttr"
        },
        replace: true,
        template: "
Hello world!
"
    }
})

實(shí)例地址

這種辦法只能單向，通過在運(yùn)行的指令DOM上設(shè)置color-attr屬性，并且采用{{}}綁定某個(gè)模型值。當(dāng)然，我們也可以直接在這里綁定字符串的顏色值，如color-attr="red"

因此當(dāng)表達(dá)式的值發(fā)生變化時(shí)，屬性color-attr的值也會(huì)發(fā)生變化，通過單向綁定該值，就可以改變隔離作用域中的屬性color.

如果綁定的隔離作用域?qū)傩悦c元素的屬性名相同，則可以采用缺省寫法
// html


// js
app.directive("helloWorld", function() {
   return {
       scope: { color: "@" },
       ...
   }
})

方法二、使用"="進(jìn)行雙向綁定

    
    

    {{ color }}
    
    

angular.module("app", [])
.controller("mainController", function($scope) {
    $scope.color = "red";
})
.directive("helloWorld", function() {
    return {
        restrict: "EA",
        scope: {
            color: "="
        },
        replace: true,
        template: "
" +
            "Hello world!" +
        "
" + 
        "
"
    }
})

實(shí)例地址

此處也采用了類似的缺省寫法。

這里需要注意的是，我們要直接在指令元素設(shè)置屬性時(shí)，是直接將實(shí)際的作用域模型復(fù)制給該屬性

這樣一個(gè)雙向綁定被建立了，改變?nèi)魏我粋€(gè)input值都會(huì)改變另外一個(gè)值。

方法三、使用"&"調(diào)用父作用域中的函數(shù)

    
    

    {{ name }}
    

angular.module("app", [])
.controller("mainController", function($scope) {
    $scope.name = "yangbo";
    $scope.say = function() {
        alert("hello!");
    }
})
.directive("helloWorld", function() {
    return {
        restrict: "EA",
        scope: {
            name: "@",
            say: "&"
        },
        replace: true,
        template: ""
    }
})

實(shí)例地址

同樣采用了缺省寫法，運(yùn)行之后，彈出窗口！

布爾值或者字符element，默認(rèn)值為false

這個(gè)配置選項(xiàng)可以讓我們提取包含在指令那個(gè)元素里面的內(nèi)容，再將它放置在指令模板的特定位置。當(dāng)我們開啟transclude之后，我們就可以使用ng-transclude來(lái)指明應(yīng)該在什么地方放置transclude的內(nèi)容

    

        
china
        
            {{name}}
        
    

angular.module("app", [])
.controller("mainController", function($scope) {
    $scope.name = "yangbo5207";
})
.directive("helloWorld", function() {
    return {
        restrict: "EA",
        scope: {},
        replace: true,
        transclude: true,
        template: "
你看不見我
"
    }
})

運(yùn)行上面的代碼，輸出

china
yangbo5207

我們查看渲染出來(lái)的html，結(jié)果為

    

        
china
        

            

                yangbo5207
            
        
    

另外當(dāng)開啟transclude時(shí)，會(huì)創(chuàng)建一個(gè)新的transclude空間，并且繼承父作用域（也就是scope設(shè)置的隔離作用域）

從上面例子我們知道，當(dāng)transclude的值被設(shè)置為true時(shí)，嵌入的內(nèi)容為{{name}}，但是如果將它的值設(shè)置為element呢，我們可以在上例的基礎(chǔ)上進(jìn)行一個(gè)簡(jiǎn)單的修改，發(fā)現(xiàn)，嵌入內(nèi)容為整個(gè)元素

{{name}}

查看渲染結(jié)果

    

        
china
        

          

            
              yangbo5207
            
          
        
    

注意：在一個(gè)指令的模板中，只能聲明一次ng-transclude

那么問題來(lái)了，如果我們想要把嵌入內(nèi)容多次放入我們的模板中怎么辦？

可以使用$transclude，后面會(huì)講到！也可以使用complie函數(shù)中，里面的transcludeFn參數(shù)，后面會(huì)講到！或者使用link連接函數(shù)

可以是一個(gè)字符串或者函數(shù)。

若為字符串，則將字符串當(dāng)做控制器的名字，來(lái)查找注冊(cè)在應(yīng)用中的控制器的構(gòu)造函數(shù)

angular.module("app", [])
.directive("myDirective", function() {
    return {
        restrict: "EA",
        replace: true,
        transclude: true,
        
        // 會(huì)查找模塊中其他被名為targetController的控制器
        controller: "targetController"
    }
})
.controller("targetController", function($scope, $element, $attrs, $transclude) {
    // 控制器邏輯放在這里
})

當(dāng)然，也可以直接在指令內(nèi)部定義為匿名函數(shù)，同樣可以注入任何服務(wù)

angular.module("app", [])
.directive("myDirective", function() {
    return {
        restrict: "EA",
        replace: true,
        transclude: true,
        controller: function($scope, $element, $attrs, $transclude) {
            // 控制器邏輯
        }
    }
})

另外還有一些特殊的服務(wù)可以注入，

$scope 與指令元素相關(guān)聯(lián)的作用域

$element 當(dāng)前指令對(duì)應(yīng)的元素

$attrs 當(dāng)前元素的屬性組成的對(duì)象

$transclude 嵌入鏈接函數(shù)，實(shí)際被執(zhí)行用來(lái)克隆元素和操作DOM中的函數(shù)（除非是用來(lái)定義一些可復(fù)用的行為，否則一般不推薦在這使用）

指令的控制器和link函數(shù)（后面會(huì)講到）可以進(jìn)行互換。區(qū)別在于，控制器主要用來(lái)提供可在指令間復(fù)用的行為，可對(duì)外提供與外部交互的接口，但是link鏈接只能在當(dāng)前指令內(nèi)部中定義行為，且無(wú)法在指令間復(fù)用。

    
外面的世界很精彩。

angular.module("app", [])
.directive("testDirective", function() {
    return {
        transclude: true,
        replace: true,
        controller: function($scope, $element, $attrs, $transclude, $log) {
            $transclude(function(clone) {
                var a = angular.element("");
                a.attr("href", $attrs.url);
                a.text(clone.text());
                $element.append(a);
            });
        }
    }
})

angular.module("app", [])
.directive("testDirective", function() {
    return {
        transclude: true,
        replace: true,
        controller: function($scope, $element, $attrs, $transclude, $log) {
            
            // 這里的$transclude就是嵌入的內(nèi)容
            var a = $transclude();
            $element.append(a);
        }
    }
})

$scope.$parent

    

        炒美股，上老虎2
    

angular.module("app", [])
.controller("parentController", function($scope) {
    $scope.title = "PARENT TIGER";
})

.controller("sonController", function($scope) {
    $scope.title = "CHILDREN TIGER";
})

.directive("testDirective", function() {
    return {
        transclude: true,
        replace: true,
        controller: function($scope, $element, $attrs, $transclude, $log) {
            var a = $transclude();
            $element.append(a);
            $log.info($scope.title);
            $log.info($scope.$parent.title);
        }
    }
})

{{ demo.name }}

angular.module("app", [])
.controller("demoController", function() {
    this.name = "Jake";
})

app.directive("testDirective", function() {
    return {
        controller: function() {
            this.name = "Jake";
        }
    }
})

    
        
            {{expander.text}}
        
    

var expModule=angular.module("expanderModule",[])
expModule.directive("accordion", function() {
    return {
        restrict : "EA",
        replace : true,
        transclude : true,
        template : "
",
        controller : function() {
            var expanders = [];
            this.gotOpened = function(selectedExpander) {
                angular.forEach(expanders, function(expander) {
                    if (selectedExpander != expander) {
                        expander.showMe = false;
                    }
                });
            }
            this.addExpander = function(expander) {
                expanders.push(expander);
            }
        }
    }
});

expModule.directive("expander", function() {
    return {
        restrict : "EA",
        replace : true,
        transclude : true,
        require : "^?accordion",
        scope : {
            title : "=expanderTitle"
        },
        template : "
"
                   + "
{{title}}
"
                   + "
"
                   + "
",
        link : function(scope, element, attrs, accordionController) {
            scope.showMe = false;
            accordionController.addExpander(scope);
            scope.toggle = function toggle() {
                scope.showMe = !scope.showMe;
                accordionController.gotOpened(scope);
            }
        }
    }
});

expModule.controller("SomeController",function($scope) {
    $scope.expanders = [{
        title : "Click me to expand",
        text : "Hi there folks, I am the content that was hidden but is now shown."
    }, {
        title : "Click this",
        text : "I am even better text than you have seen previously"
    }, {
        title : "Test",
        text : "test"
    }];
});

此處的compile函數(shù)值什么指令中配置的，與上面說(shuō)的$compile服務(wù)不一樣

//compile函數(shù)的語(yǔ)法
compile:function compile(tElement,tAttrs,transclude){
      return{
        pre:function preLink(scope,iElement,iAttrs,controller){},
        post:function postLink(scope,iElement,iAttrs,controller){}
      }
    }

preLink函數(shù)會(huì)在編譯階段之后，指令鏈接到子元素之前執(zhí)行，類似的，postLink會(huì)在指令鏈接到子元素之后執(zhí)行。這意味著，為了不破壞綁定過程，如果你需要修改DOM結(jié)構(gòu)，你應(yīng)該在postLink函數(shù)中來(lái)做這件事情。

//link鏈接函數(shù)
link:function postLink(scope,iElement,iAttrs){}

許多內(nèi)容都是從不同的網(wǎng)站上整理而來(lái)，每一個(gè)實(shí)例都是自己運(yùn)行過后保存在codepen上，大家可以結(jié)合codepen的例子結(jié)合理解文章內(nèi)容，本文屬于收集文，非原創(chuàng)，但絕對(duì)干貨！值！得!一!贊！與收藏。