您的位置：首页 > Web前端 > AngularJS

angularjs自定义指令绑定策略---‘@’绑定

2015-06-14 13:29 591 查看

接上一篇
说了“=”绑定，我们再来说“@”绑定：
如果读了我对“=”绑定的理解的读者一定知道，在我的理解中有个“桥梁”的说法，如果不知道的请先去读我的上一篇博文：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，说到这里也说得差不多了，如果觉得还是有点绕，就再去看看我对“=”绑定的理解吧，然后自己将代码复制到本地试试，多修改修改来加深理解。

补充一点：简写的方式和上篇博文中是一样的方式

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angular angularjs 指令

相关文章推荐

新的分享

章节导航