angular的指令独立作用域(以及$watch的使用)
在编写指令的时候,会有一个独立作用域的问题(scope),他默认的是
scope:false 不创建自己的作用域,直接使用的就是父级的作用域, 问题:容易出现全局的污染,是的指令的重复性使用回出现一些问题。 scope:true 创建指令自己的独立作用域,继承父级的作用域,可以解决上面的问题 scope:{ //&,=,@ name:'=' }
这种写法就使得指令与外界的作用域相互分割,只能通过&,=,@,进行数据的相互传递,
下面细数一些在ng中自己会创建独立作用域的指令(但是ta们都是继承父级的作用域的,因此你可以使用$parent,关键时刻)
ng-include、ng-switch、ng-repeat、ng-controller、ng-view
关于ng-repeat的独立作用域问题尤其常见
demo:
$scope.myArr = [11,12]; $scope.$watch('myArr',function(newVal,oldVal){ console.log(newVal); }); <ul> <li ng-repeat= "num in myArr"> <input type="text" ng-model="num"/> <span ng-bind="num"></span> </li> </ul>
发现我们在改变值的时候,并不会触发$watch
$scope.myObj = [{name:11},{name:12}]; $scope.$watch('myObj',function(newVal,oldVal){ console.log(newVal); }); <ul> <li ng-repeat= "nam in myObj"> <input type="text" ng-model="nam"/> <span ng-bind="nam"></span> </li> </ul>
发现这里也不会触发$watch
进一步查证发现,$watch如果在监听一个对象的时候,他默认只会检测对象的引用是否改变,我们需要加上第三个参数,他就会监听对象的值的变年
$scope.$watch('myObj',function(newVal,oldVal){ console.log(newVal); },true);
http://www.cnblogs.com/evaling/tag/angularJS/