ANGULAR JS WATCH监听使用

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);
      })

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

时间: 2024-10-20 14:16:18

ANGULAR JS WATCH监听使用的相关文章

js 实时监听input中值变化

js 实时监听input中值变化 分类: Javascript2014-05-11 11:13 849人阅读 评论(0) 收藏 举报 [html] view plaincopyprint? <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS

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

在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒泡,没有事件监听的机制,对于事件监听的兼容性问题是最大的难题: 1.直接把事件的方法写在页面结构上 function eventfun(){ //console.log(this); } <input type="button" onclick="eventfun()&qu

js动态监听dom变化

原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀   var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver      // 选择目标节点   var target = document.querySelector('#some-id');       // 创建观察

JAVAscript学习笔记 js句柄监听事件 第四节 (原创) 参考js使用表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>句柄添加监听事件</title> <script type="text/javascript" src="tzy.js"></script> </head> <body>

js 事件监听封装

var eventUtil={//添加句柄 //element,节点 //type,事件类型 //handler,函数 addHandler:function(element,type,handler){  if(element.addEventListener){   element.addEventListener(type,handler,false);   }else if(elemnt.attachEvent){//对ie进行判断   element.attachEvent('on'+

js键盘监听操作

//js监听键盘事件 document.onkeydown = function (event) { var e = event || window.event || arguments.callee.caller.arguments[0]; alert(e.keyCode);//打印对应键盘的键值 if (e && e.keyCode == 13)//监听键盘Enter建 { } if (e && e.keyCode == 8)//监听键盘Backspace建 { } /

js事件监听-addEventListener (w3c标准) 和 attachEvent(ie)

研究了一个小时,没看懂这两个属性 window.onload = function(){ var oDiv = document.getElementById("J_myDiv"); //找到对象 oDiv.onclick = function(){ //设置事件监听函数 alert("click"); }} 缺点:1.添加单一事件 2.不能删除事件 第二:IE中监听函数 var oDiv; function fnClick(){ alert("click

js即时监听文本内容

<script type="text/javascript"> //其他浏览器 function OnInput (event) { alert ("文本内容: " + event.target.value); } // IE浏览器 function OnPropChanged (event) { if (event.propertyName.toLowerCase () == "value") { alert ("文本内容

JS如何监听动画结束

场景描述 在使用JS控制动画时一般需要在动画结束后执行回调去进行DOM的相关操作,所以需要监听动画结束进行回调.JS提供了以下事件用于监听动画的结束,简单总结学习下. CSS3动画监听事件 transitionEnd事件 transitionEnd事件会在CSS transition动画结束后触发. 动画结束后触发监听事件 <!DOCTYPE html> <html> <head> <title>transtionend demo</title>