说明
指令里有个scope属性,可以用来设置指令的作用域和数据共享,分开来看
作用域:
1> 有自己的作用域
1)全面继承父级的。
2)详细的设置,是单向或者双向的。
2> 没有
数据:
属性和方法
遵循:基本类型是值传递,引用类型是地址的传递。
方法推荐用通信(事件)的方式来做,可以避免指针误操作的问题。
详细介绍
默认值 scope:false
不会有自己的作用域,即是直接使用父级的scope里的值。
scope:true
创建自己的作用域,同时继承父级scope里的值,即等同于从父级拿到初始值,修改它,不会改变父级scope里的值。(和ng-controller的不太一样,后面有提到)
scope:{}
完全独立的作用域($rootScope都拿不到),通过三种模式 = & @同父级scope交互。
1、= 双向绑定 写法是
<demo a="aa"></demo>
父子组件都需对同一数据做操作,且要数据保持统一。如果不需要,可以用单向的。
2、@ 单向绑定 写法是
<demo b="{{bb}}"></demo>
单向的数据可以做初始值,和使用值。
分二种情形:
1 单纯使用,不要在组件里对他修改,因为他会受到原数据影响,父域更改后组件里会丢失,然后自动被父域值覆盖!
2 做初始值,但只能用第一次的值,以后就没有干系。这样两边都可以做修改。有其他需求要同步数据时,可以通信一下。
3、& 函数方法绑定 写法是
<demo c="cc()"></demo>
注意:这里只是能执行父的方法,没法传递参数数据过去。
那么像上面这样scope里就是:
scope:{
a:'=',
b:'@',
c:'&'
}
aa,bb,cc都是父级scope里的值。
另外,指令的这里定义指令的名字是驼锋命名的,在html里要转成中划线链接的,如 指令名是 aBc ,那么 html里要写成<a-bc> <a-bc>,属性值绑定也遵守这个规则,大写字母替换成 ‘中划线+小写’,如,ABC,就要写成<a-b-c><a-b-c>。
附:作用域继承时的关系:
在子里修改引用类型的值是会同时改变父子的值,推荐的写法是推荐写成引用类型的?这样也不太好。。
可以测下代码:
<h1>父作用域:</h1>
<p>{{a}}</p>
<p>{{b}}</p>
<p>{{c.str}}</p>
<p>{{d.str}}</p>
<div ng-controller="MyController">
<h1>子作用域:</h1>
<p>{{a}}</p>
<p>{{b}}</p>
<p>{{d.str}}</p>
</div>
$rootScope.a= 'a的默认值,父修改会影响所有的子级';
$timeout(function(){
$rootScope.a = '父级a改变了,子级也跟着变了';
},2000);
$rootScope.b= 'b的默认值,子级修改不会影响父级';
$timeout(function(){
$scope.b = '子级b改变了,不会影响父级';
},2000);
$rootScope.c= {str:'c的默认值,子级修改会影响父级,因为是引用类型'};
$timeout(function(){
$scope.c.str='子级c改变了,会影响父级,因为是引用类型';
},2000);
$rootScope.d= {str:'d的默认值,子级修改会影响父级,因为是覆盖'};
$timeout(function(){
$scope.d={str:'子级d改变了,不会影响父级,因为是覆盖'};
},2000);