ANGULAR 监听使用：

当angular数据模型发生变化时，我们需要如果需要根据他的变化触发其他的事件。

$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。

$watch(watchExpression, listener, objectEquality);

watchExpression 需要监控的表达式
listener 处理函数，函数参数如下 
function(newValue,oldValue, scope)
objectEquality 是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它 
<!DOCTYPE html>

<html ng-app="app">

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<script src="assets/angular.min.js"></script>

<script src="assets/js/jquery.min.js"></script>

<script type="text/javascript">

var app=angular.module("app",[]);

app.controller('MainCtrl', function($scope) {

      $scope.name = "Angular";

      $scope.updated = -1;

      $scope.$watch('name',  function(newValue, oldValue) {

            if (newValue === oldValue) { return; } // AKA first run

            $scope.updated++;

      });

      var i=0;

      $scope.getScope=function(){

         // console.info(this);

         var obj=$("#btnTest");

         i++;

         angular.element( obj).scope().name="hello" +i;

      }

    });

</script>

<body ng-controller="MainCtrl">

  <input ng-model="name" />

  Name updated: {{updated}} times.

  <button id="btnTest" ng-click="getScope()">获取scope</button>

</body>

</html>

此代码监控$scope的name值的变化，如果发生变化则触发监听。

监控对象：

<!DOCTYPE html>

<html ng-app="app">

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<script src="assets/angular.min.js"></script>

<script src="assets/js/jquery.min.js"></script>

<script type="text/javascript">

var app=angular.module("app",[]);

app.controller('MainCtrl', function($scope) {

    $scope.user = { name: "Fox" };

      $scope.updated = -1;

      var watch=$scope.$watch('user', function(newValue, oldValue) {

        if (newValue === oldValue) { return; }

        $scope.updated++;

        $scope.$broadcast('userUpdate', newValue.name);

      });

      //watch();

      var i=0;

      $scope.$on('userUpdate',function(d,data){

          console.info(data);

      })

      $scope.getScope=function(){

         // console.info(this);

         var obj=$("#btnTest");

         i++;

         angular.element( obj).scope().user.name="hello" +i;

      }

    });

</script>

<body ng-controller="MainCtrl">

  <input ng-model="user.name" />

  Name updated: {{updated}} times.

  <button id="btnTest" ng-click="getScope()">获取scope</button>

</body>

</html>

这里我们点击按钮会发现监控并不会触发，原因是我们监控了user对象，这个user对象没哟发生变化，只不过属性值发生了变化。

如果我们希望监控user对象属性发生变化，有两个做法。

1.使用深度监控。

方法如下：

<!DOCTYPE html>

<html ng-app="app">

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<script src="assets/angular.min.js"></script>

<script src="assets/js/jquery.min.js"></script>

<script type="text/javascript">

var app=angular.module("app",[]);

app.controller('MainCtrl', function($scope) {

    $scope.user = { name: "Fox" };

      $scope.updated = -1;

      var watch=$scope.$watch('user', function(newValue, oldValue) {

        if (newValue === oldValue) { return; }

        $scope.updated++;

        $scope.$broadcast('userUpdate', newValue.name);

      },true);

      //watch();

      var i=0;

      $scope.$on('userUpdate',function(d,data){

          console.info(data);

      })

      $scope.getScope=function(){

         // console.info(this);

         var obj=$("#btnTest");

         i++;

         angular.element( obj).scope().user.name="hello" +i;

      }

    });

</script>

<body ng-controller="MainCtrl">

  <input ng-model="user.name" />

  Name updated: {{updated}} times.

  <button id="btnTest" ng-click="getScope()">获取scope</button>

</body>

</html>

设置为深度监控，只要对象发生变化，那么监听就会触发。

2.直接写对象的属性值路径。

var watch=$scope.$watch('user.name', function(newValue, oldValue) {

具体代码就不全部写了。

消除监听

系统中太多的监听会影响系统的性能，我们可以在满足某些条件后，去掉监听。

去掉监听方法如下：

var watch=$scope.$watch('user', function(newValue, oldValue) { 
        if (newValue === oldValue) { return; } 
        $scope.updated++; 
        
        $scope.$broadcast('userUpdate', newValue.name); 
      },true); 
//去掉监听。       
watch();

在系统中使用事件广播。

比如在监听时，我们对外广播一个事件，

在控制其中写监听的处理方法：

实例如下：

$scope.$broadcast('userUpdate', newValue.name);

监听代码：

$scope.$on('userUpdate',function(d,data){

          console.info(data);

      })

这种做法最好使用在指令中，指令中广播事件，在控制器中实现监听。好处在于实现代码的重用。

ANGULAR JS WATCH监听使用（详）的更多相关文章

  1. ANGULAR JS WATCH监听使用

    ANGULAR 监听使用: 当angular数据模型发生变化时,我们需要如果需要根据他的变化触发其他的事件. $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. ...

  2. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

  3. js 事件监听 冒泡事件

    js 事件监听  冒泡事件   的取消 [自己写框架时,才有可能用到] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...

  4. js 事件监听 兼容浏览器

    js 事件监听 兼容浏览器   ie 用 attachEvent   w3c(firefox/chrome)  用 addEventListener 删除事件监听 ie 用 detachEven   ...

  5. js事件监听机制(事件捕获)总结

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...

  6. Android开发之手势滑动（滑动手势监听）详解

    Android开发之手势滑动(滑动手势监听)详解 在Android应用中,经常需要手势滑动操作,比如上下滑动,或左右方向滑动,处理手势滑动通常有两种方法:一种是单独实现setOnTouchListen ...

  7. js动态监听dom变化

    原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀   var MutationObserver = window.MutationO ...

  8. js事件监听机制(事件捕获)

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...

  9. Vue.js：监听属性

    ylbtech-Vue.js:监听属性 1.返回顶部 1. Vue.js 监听属性 本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例 & ...

随机推荐

  1. 论文笔记（1）——《Where's Wally?Precise User Discovery Attacks in Location Proximity Services》

    Abstract: 位置相近服务在社交和移动网络的广泛使用是基于可用性和用户隐私的平衡,但引发了三角定位攻击的风险.文章系统化地讨论了此类攻击的防范,包括问题在不同临近模型下的形式化,针对不同模型的有 ...

  2. TextView无法通过setText设值

    因为setText接收的是char序列接口类型实例,假如你在传入int类型的时候一定要String.valueOf: 设值没有成功八成是你传递的为非char序列接口类型!!!!!

  3. 读懂UI设计的心理学

    好文转载,版权归原作者 作为UI设计师,对待用户就像对待婴儿,知道如何通过界面设计诱导用户非常重要,这就需要了解心理学方面的知识了.今天分享一篇日本设计师的好文,结合心理学与设计,教你读懂心理学,提高 ...

  4. SQL2014 error 40 ( Microsoft SQL Server, 错误2)

    可能是安装了SQL EXPRESS版 尝试使用(local)\SQLEXPRESS 作为服务器名称登陆. 用 计算机名\实例名  作为用户名登录.

  5. asp.net mvc中ViewData、ViewBag和TempData的详解

    一.ViewData和ViewBag 1.ViewData和ViewBag都是从Action向View传递数据的方式,当然还有其他方式如向View传递Model. 2.ViewData页面查询数据时需 ...

  6. SpringMVC Controller 介绍

    一.简介 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理层处理之后封装成一个Model ,然后再把该Mo ...

  7. 使用NUGet自动下载(还原)项目中使用的包

    签出完整项目后,在解决方案名称上点右键,选择"启用NuGet程序包还原",如下图: 出现询问,当然要点是:是 当完成后,会发现在解决方案中,多出".nuget" ...

  8. flume 配置

    [root@dtpweb data]#tar -zxvf apache-flume-1.7.0-bin.tar.gz[root@dtpweb conf]# cp flume-env.sh.templa ...

  9. windows---------------windows如何查看哪个应用占用了哪个端口的方法

    假如我们需要确定谁占用了我们的80端口在windows命令行窗口下执行:netstat -aon|findstr "80"TCP 127.0.0.1:80 0.0.0.0:0 LI ...

  10. Java中关于先有鸡还是先有蛋的问题----Class&Object

    在Java中,我们常常会看到一个类型:Class.并且在类似Person.class,cache.getClass()等代码中见到它的身影. 众所周知,Class是用来描述一个类的类型,而Object ...