匯入：我們想要實現這樣的效果：當我們點選標題的時候展示下面的內容，再點選則收回去。

一、首先回顧一下有哪些繫結策略？

 看這個實在是有點抽象了，我們來看具體的例項分析吧！

二、簡單的Demo例項

   @繫結：傳遞一個字串作為屬性的值。比如 str : ‘@string’

   控制器中程式碼部分示例： 

myDirec.controller('MyCtrl3',['$scope',function($scope){
   $scope.ctrlFlavor="雞尾酒";
   
   $scope.sayHello=function(name){
       alert("Hello "+name);
   };
   
}]);

myDirec.directive("drink",function(){
    return{
          restrict:'AE',
          scope:{
                flavor:'@'  //自動繫結，傳遞的是字串
          },
          template:"<div>{{flavor}}</div>",
    };
});
 

<div ng-controller="MyCtrl3">
       <drink flavor="{{ctrlFlavor}}"></drink>
    </div>

   =繫結：指定獲取屬性的型別為父作用域的屬性

myDirec.directive("drink2",function(){
    return{
        restrict:'AE',
        scope:{
            flavor:'='  //自動繫結
        },
        template:'<input type="text" ng-model="flavor"/>'
    };
});
 

   頁面：

<div ng-controller="MyCtrl3">
        <drink2 flavor="ctrlFlavor"></drink2>
    </div>

    執行的流程是這樣的：

　　① 指令被編譯的時候會掃描到template中的模型發現有一個flavor，

　　② 查詢scope中是否定義：通過=與父作用域繫結，方式是傳遞父作用域中的屬性ctrlFlavor；

　　③ flavor與父作用域中的ctrlFlavor屬性繫結，找到它的值“雞尾酒”；

　　④ 將model的值顯示在模板中。

       &繫結：傳遞的是父作用域中的函式

控制器部分：

myDirec.directive("greeting", function() {
    return {
        restrict:'AE',
        scope:{
            greet:'&'
        },
        template:'<input type="text" ng-model="userName" /><br/>'+
                 '<button ng-click="greet({name:userName})">問候一下</button><br/>'
    };
});

        頁面部分：

<div ng-controller="MyCtrl3">
            <greeting greet="sayHello(name)"></greeting>
            <greeting greet="sayHello(name)"></greeting>
            <greeting greet="sayHello(name)"></greeting>
</div>

三、Expander示例

           首先看控制器程式碼：

/*Expander示例*/
myDirec.controller('SomeController',function($scope) {
    $scope.title = '點選展開';
    $scope.text = '這裡是內部的顯示的內容';
});

myDirec.directive('expander', function() {
    return {
        restrict : 'EA',
        replace : true,
        transclude : true,
        scope : {
            title : '=expanderTitle'
        },
        template : '<div>'
                 + '<div class="title" ng-click="toggle()">{{title}}</div>'
                 + '<div class="body" ng-show="showMe" ng-transclude></div>'
                 + '</div>',
        link : function(scope, element, attrs) {
            scope.showMe = false;
            scope.toggle = function() {
                scope.showMe = !scope.showMe;
            };
        }
    };
});

<div ng-controller='SomeController'>
        <expander class='expander' expander-title='title'> {{text}} </expander>
 </div>

　　① 指令被編譯的時候會掃描到template中的模型發現有一個{{title}}，

　　② 查詢scope中是否定義：通過=與父作用域繫結，方式是傳遞父作用域中的屬性;

    我總是在這裡犯糊塗，解釋下這個“方式是傳遞父作用域中的屬性”，這個在哪裡用的呢？

<div ng-controller='SomeController'>
        <expander class='expander' expander-title='title'> {{text}} </expander>
 </div>

　　③ expander-title與父作用域中的title屬性繫結，找到它的值“點選展開”；

　　④ 將title的值顯示在模板中。

           注意：指令中的獨立作用域中的屬性title是為了給下面的模板使用 的，而title所對應的值，要依據頁面中指令的使用傳人具體的父作用域中的屬性，完成屬性的繫結操作。

           總之、我們可以利用angularjs為我們提供的資料繫結策略來實現從父作用域向指令中傳值，這個很有用哦！

          不知道講清楚了沒，歡迎批評指正O(∩_∩)O~