zoukankan      html  css  js  c++  java
  • 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/

  • 相关阅读:
    CSS Sprite
    使用float和display:block将内联元素转换成块元素的不同点
    [POJ 1185] 炮兵阵地
    [POJ 1947] Rebuilding Roads
    [HDU 1561] The more, The Better
    [HDU 1011] Starship Troopers
    [POJ 1155] TELE
    [HDU 2196] Computer
    [HDU 1520] Anniversary party
    [HDU 5029] Relief grain
  • 原文地址:https://www.cnblogs.com/evaling/p/7691992.html
Copyright © 2011-2022 走看看