标签：angular angularjs 指令 自定义指令 绑定 绑定策略 如何绑定
接着上一篇
理解了“=”和“@”绑定之后再来理解“&”绑定，就很简单了，同理，用“桥梁”进行分析，但还是有一些例外的情况，要不然angularjs也不会单独设定一个绑定策略，看案例先：
<!DOCTYPE html>
<html lang="en" ng-app="MyModule">
<head>
<meta charset="UTF-8">
<title>Scope And</title>
</head>
<body ng-controller="MyCtrl">
<eat-with-tool tool="eatWithChopsticks()"/>
</body>
<script type="text/javascript" src="../framework/angular.js"></script>
<script type="text/javascript" src="../js/scopeAnd.js"></script>
</html>
scopeAnd.js中的内容:
var myModule = angular.module("MyModule",[]);
myModule.controller("MyCtrl",["$scope",function($scope){
$scope.eatWithChopsticks = function(){
console.log("eat with Chopsticks");
}
}]);
myModule.directive("eatWithTool",function(){
return{
restrict:"AE",
scope:{
eat1:"&tool"
},
template:"<div><button ng-click=‘eat1()‘ value=‘Eat‘/></div>",
replace:true
}
});
上面的例子先调用了一个简单的无参构造函数，传参数的例子稍后继续。分析一下，“桥梁”在哪里？是的，就是蓝色的部分;在html模板中，tool指定调用controller中的一个方法eatWithChopsticks（用筷子吃），OK，就这样，可以调用了。
看传入参数的例子：（改造了一下）
<!DOCTYPE html>
<html lang="en" ng-app="MyModule">
<head>
<meta charset="UTF-8">
<title>Scope And</title>
</head>
<body ng-controller="MyCtrl">
<eat-with-tool eat="eatWithChopsticks(tool)"/>
</body>
<script type="text/javascript" src="../framework/angular.js"></script>
<script type="text/javascript" src="../js/scopeAnd.js"></script>
</html>
var myModule = angular.module("MyModule",[]);
myModule.controller("MyCtrl",["$scope",function($scope){
$scope.eatWithChopsticks = function(tool){
console.log("eat with " + tool);
}
}]);
myModule.directive("eatWithTool",function(){
return{
restrict:"AE",
scope:{
eat:"&"//这里简写了，因为蓝色和紫色相同了
},
template:"<div><input type=‘text‘ ng-model=‘useTool‘ placeholder=‘Enter your tool‘/><div><div><button ng-click=‘eat({tool:useTool})‘ value=‘Eat‘/></div>",
replace:true
}
});
这个例子中多了两个颜色：绿色和橙色，绿色代表指令中的模型数据，橙色代表在html模板中的参数，是不是有点不好理解，我们用“桥梁”来分析下：我们要把controller中的eatWithChopsticks方法经过桥梁eat绑定之后在指令中进行调用，该方法本身是要传入参数的，那么，但在指令中调用该方法的时候，参数从哪里来呢？当然只能从指令域中的数据来传入，这里就是ng-model=‘useTool‘，那怎么传入呢？绑定一个变量了，eatWithChopsticks(tool)中的tool保持和{tool:useTool}中的tool名字相同就可以了。
为什么要这样绑定个？angularjs说这是规定，你就这么干就可以了...可能这个理由有点霸道，但我确实没有理解到为什么要这样绑定，等读源码的时候在回头来解答这个问题
本文出自 “从普通程序员到CTO” 博客，请务必保留此出处http://1730634.blog.51cto.com/1720634/1661783
标签：angular angularjs 指令 自定义指令 绑定 绑定策略 如何绑定
原文地址：http://1730634.blog.51cto.com/1720634/1661783
