AngularJS中scope的绑定策略实例分析
本文实例讲述了AngularJS中scope的绑定策略。分享给大家供大家参考，具体如下：
当scope选项写为scope:{ }这种形式的时候，就已经为指令生成了隔离作用域，指令的模板就无法访问外部作用域了：
具有隔离作用域的指令最主要的使用场景是创建可复用的组件，组件可以在未知上下文中使用，并且可以避免污染所处的外部作用域或不经意地污染内部作用域。
现在，我们来看看绑定策略的三种形式： @、= 、&。
1. @
本地作用域属性：使用@符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域的变量：
@ (or @attr)
把当前的属性作为字符串传递。你还可以绑定来自外层的scope的值，在属性值中插入{{ }}即可。什么意思呢？说的简单一点就是假设你在模板中有个双花括号表达式，然后我们把表达式里的内容和html中指令里特定名字的属性绑定起来：
<div ng-controller="nameController">
<direct for-name="{{ Name }}"></direct>
<div>
directive("direct",function(){
return{
restrict: 'A',
template: '<div>指令中：{{ name }}</div>',
scope:{
name:'@forName'
}
}
})
.controller("nameController",function($scope){
$scope.Name="张三";
});
2. =
与父scope中的属性进行双向绑定
@是针对字符串（准确来说是表达式expression）而用，但=是针对某个对象的引用；
<div ng-controller="nameController"> <direct case="data[0]"></direct> <direct case="data[1]"></direct> <div>
directive("direct",function(){
return{
restrict: 'ECMA',
template: '<div>指令中：{{ case.name }}</div>',
scope:{
case:'='
}
}
})
.controller("nameController",function($scope){
$scope.data=[{name:"张三"},{name:"李四"}];
});
data是一个对象数组，里面包含了两个对象，所以，我们分别把两个对象传递给了case这个属性，case属性就把这个对象的引用传递给了模板中我们写的{{ case.name }}中的case;而如果你在=后边加上了自己定义的名字，那只要把html里case属性换成那个名字就可以了。
3. &
传递来自父scope中的函数、稍后调用
它的含义是：对父级作用域进行绑定，并将其中的属性包装成一个函数，注意任何类型的属性都会被包装成一个函数，比如一个单纯的字符串，或是一个对象数组，或是一个函数方法。
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关文章
本篇文章主要介绍了angular.extend方法的具体使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要为大家详细介绍了AngularJS单选框及多选框实现双向动态绑定的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要介绍了Angular使用动态加载组件方法实现Dialog的示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
大家都是在Reactive Extensions for Javascript诞生于几年前，随着angular2正式版的发布，它将会被更多开发者所认知。这篇文章我们来详细介绍RxJs提供的Observable对象，有需要的朋友们可以参考借鉴。2016-09-09
这篇文章主要介绍了Angular中支持SCSS的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了Angular实现的table表格排序功能,结合完整实例形式分析了AngularJS表格排序所涉及的事件响应、元素遍历、属性修改等相关操作技巧,需要的朋友可以参考下2017-12-12
本文给大家分享angularjs实现分页查询功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下2017-02-02
这篇文章主要介绍了AngularJS的filter，中文名“过滤器”是用来过滤变量的值，或者格式化输出，得到自己所期望的结果或格式的东东，的相关资料,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了使用AngularJS对路由进行安全性处理的方法,AngularJS是一款高人气的JavaScript库,需要的朋友可以参考下2015-06-06
Angular中$broadcast和$emit的使用方法详解
本篇文章主要介绍了Angular中$broadcast和$emit的使用方法详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
最新评论