AngularJS中scope绑定策略的示例分析
这篇文章主要介绍AngularJS中scope绑定策略的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联建站专业为企业提供唐山网站建设、唐山做网站、唐山网站设计、唐山网站制作等企业网站建设、网页设计与制作、唐山企业网站模板建站服务,10多年唐山做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
具体如下:
当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中scope绑定策略的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
本文标题:AngularJS中scope绑定策略的示例分析
文章起源:http://pwwzsj.com/article/pcjohe.html