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/

  • 相关阅读:
    Mybatis批量插入,是否能够返回id列表
    SVN和Git代码管理小结
    SVN和Git代码管理小结
    Spring异步执行(@Async)2点注意事项
    Spring异步执行(@Async)2点注意事项
    2015年工作中遇到的问题101-110
    Codeforces 263B. Appleman and Card Game
    Codeforces 263A. Appleman and Easy Task
    HDU 482 String
    字符串hash-BKDRHash
  • 原文地址:https://www.cnblogs.com/evaling/p/7691992.html
Copyright © 2011-2022 走看看