AngularJS中scope的绑定策略实例分析

2023-09-21 20:05:05 64

本文实例讲述了AngularJS中scope的绑定策略。分享给大家供大家参考，具体如下：

当scope选项写为scope:{}这种形式的时候，就已经为指令生成了隔离作用域，指令的模板就无法访问外部作用域了：

具有隔离作用域的指令最主要的使用场景是创建可复用的组件，组件可以在未知上下文中使用，并且可以避免污染所处的外部作用域或不经意地污染内部作用域。

现在，我们来看看绑定策略的三种形式：@、=、&。

1.@

本地作用域属性：使用@符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域的变量：

@(or@attr)

把当前的属性作为字符串传递。你还可以绑定来自外层的scope的值，在属性值中插入{{}}即可。什么意思呢？说的简单一点就是假设你在模板中有个双花括号表达式，然后我们把表达式里的内容和html中指令里特定名字的属性绑定起来：

directive("direct",function(){
return{
restrict:'A',
template:'指令中：{{name}}',
scope:{
name:'@forName'
}
}
})
.controller("nameController",function($scope){
$scope.Name="张三";
});

2.=

与父scope中的属性进行双向绑定

@是针对字符串（准确来说是表达式expression）而用，但=是针对某个对象的引用；

directive("direct",function(){
return{
restrict:'ECMA',
template:'指令中：{{case.name}}',
scope:{
case:'='
}
}
})
.controller("nameController",function($scope){
$scope.data=[{name:"张三"},{name:"李四"}];
});

data是一个对象数组，里面包含了两个对象，所以，我们分别把两个对象传递给了case这个属性，case属性就把这个对象的引用传递给了模板中我们写的{{case.name}}中的case;而如果你在=后边加上了自己定义的名字，那只要把html里case属性换成那个名字就可以了。

3.&

传递来自父scope中的函数、稍后调用

它的含义是：对父级作用域进行绑定，并将其中的属性包装成一个函数，注意任何类型的属性都会被包装成一个函数，比如一个单纯的字符串，或是一个对象数组，或是一个函数方法。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJSMVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

AngularJS中scope的绑定策略实例分析

热门推荐

随机推荐