标签：angular angularjs 指令 自定义指令 绑定 绑定策略 如何绑定
接上一篇
说了“=”绑定，我们再来说“@”绑定：
如果读了我对“=”绑定的理解的读者一定知道，在我的理解中有个“桥梁”的说法，如果不知道的请先去读我的上一篇博文：http://1730634.blog.51cto.com/1720634/1661748
先看案例：
<!DOCTYPE html>
<html lang="en" ng-app="MyModule">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<input type="text" ng-model="color" placeholder="Enter a color"/>
<bind-property color-prop="{{color}}"></bind-property>
<bind-property color-prop="color"></bind-property>
<bind-property color-prop="color()"></bind-property>
</div>
</body>
<script type="text/javascript" src="../framework/angular.js"></script>
<script type="text/javascript" src="../js/scopebind@.js"></script>
</html>
scopebind@.js中的内容：
var myModule = angular.module("MyModule",[]);
myModule.directive("bindProperty",function(){
return {
scope:{
tcolor:"@colorProp"
},
restrict:‘E‘,
template:"<input type=‘text‘ ng-model=‘tcolor‘ style=‘background-color:{{tcolor}}‘/>",
replace:true
};
});
上面的代码已经很清晰了，写了一个bind-property的指令，绑定指令变量tcolor到模板中的color变量，@绑定是单项绑定，只有color的值变化才会导致tcolor的变化。而我多写了几个bind-property指令，直接赋值字符串“color”和“color()”，这两个字符串和color一点关系都没有，不会随着其变化为变化，因为我并没有将其和“ng-model="color"”中定义的color进行绑定，只有“{{color}}”才叫做读取了MyModule中的color的值
OK，说到这里也说得差不多了，如果觉得还是有点绕，就再去看看我对“=”绑定的理解吧，然后自己将代码复制到本地试试，多修改修改来加深理解。
补充一点：简写的方式和上篇博文中是一样的方式
本文出自 “从普通程序员到CTO” 博客，请务必保留此出处http://1730634.blog.51cto.com/1720634/1661750
标签：angular angularjs 指令 自定义指令 绑定 绑定策略 如何绑定
原文地址：http://1730634.blog.51cto.com/1720634/1661750
