Angularjs中三种数据的绑定策略(“@”，“=”，“&”)

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>

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示例*/
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>

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