var myModule = angular.module("MyModule", []); //指定了控制器对象 myModule.controller('MyCtrl', ['$scope', function($scope){ $scope.ctrlFlavor="百威"; }]) //指定了指令 myModule.directive("drink", function() { return { restrict:'AE', scope:{ flavor:'=' //这里通过'='指定了drink指令的flavor和scope中的双向数据绑定！ }, template:'<input type="text" ng-model="flavor"/>' } });
这就是'='这种绑定方式。其实现了双向的数据绑定策略。我们看看最后的DOM结构是怎么样的：
其实双向数据绑定<drink flavor="ctrlFlavor"></drink>是很明显的，需要好好理解双向数据绑定(指令和控制器之间的双向数据绑定)
第四步：我们使用&绑定策略来完成对controller父级方法的调用：
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <link href="https://www.jb51.net/css/bootstrap-3.0.0/css/bootstrap.css" > </head> <body> <div ng-controller="MyCtrl"> <!--接下来是三个自定义的指令greeting指令--> <greeting greet="sayHello(name)"></greeting> <greeting greet="sayHello(name)"></greeting> <greeting greet="sayHello(name)"></greeting> </div> </body> <script src="https://www.jb51.net/framework/angular-1.3.0.14/angular.js"></script> <script src="https://www.jb51.net/ScopeAnd.js"></script> </html>
其中定义了三个指令greeting,每一个指令都需要调用controller中的一个sayHello方法，（angularjs中如何实现控制器和指令之间交互指出了可以通过定义属性的方式使得控制器和指令之间进行交互，不过这里我们可以通过简单的&完成同样的功能）并且传入不同的参数name值：
var myModule = angular.module("MyModule", []); //为控制器指定了一个sayHello方法，同时为这个方法可以传入一个参数 myModule.controller('MyCtrl', ['$scope', function($scope){ $scope.sayHello=function(name){ alert("Hello "+name); } }]) myModule.directive("greeting", function() { return { restrict:'AE', scope:{ greet:'&'//传递一个来自父scope的函数用于稍后调用，获取greet参数，得到sayHello(name)函数 }, //在template中我们在ng-click中指定一个参数，其指定方式为调用controller中greet方法，传入的参数name值为username //也就是ng-model='userName'中指定的参数 template:'<input type="text" ng-model="userName" /><br/>'+ '<button ng-click="greet({name:userName})">Greeting</button><br/>' } });
通过&就可以完成对父级作用方法的调用，而不是采用传统的通过为指令指定属性的方式完成控制器和指令之间的通行!