Angular中的$watch方法详解

在$apply方法中提到过脏检查，首先apply方法会触发evel方法，当evel方法解析成功后，会去触发digest方法，digest方法会触发watch方法。

(1)$watch简介

在digest执行时，如果watch观察的的value与上一次执行时不一样时，就会被触发。

AngularJS内部的watch实现了页面随model的及时更新。

$watch方法在用的时候主要是手动的监听一个对象，但对象发生变化时触发某个事件。

(2)watch方法用法

$watch(watchFn,watchAction,deepWatch)

watchFn:angular表达式或函数的字符串

watchAction(newValue,oldValue,scope):watchFn发生变化会被调用

deepWatch：可选的布尔值命令检查被监控的对象的每个属性是否发生变化

$watch会返回一个函数，想要注销这个watch可以使用函数

(3)例子

在前面的例子中，当name的表单改变30次，然后触发某个事件。

控制器代码如下：

var firstController = function ($scope){
  $scope.name='张三';
  $scope.count=0;
  // 监听一个model 当一个model每次改变时 都会触发第2个函数
  $scope.$watch('name',function(newValue,oldValue){
    ++$scope.count;
    if($scope.count > 30){
      $scope.name = '已经大于30次了';
    }
  });
}

html代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div ng-app="">
    <div ng-controller="firstController">
      <input type="text" value="" ng-model="name"/>
      改变次数:{{count}}-{{name}}
    </div>
  </div>
  <script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
</html>

运行效果如下：

前30次可以随意修改：

当修改了30次后，name固定为'已经大于30次了'：

这就是watch的作用，model每一次改变时都会触发第二个函数。

(4)watch的第三个参数

当监听的为一个对象或者数组时，例如：

 $scope.data = {
    name :'李四',
    count:20
  }

此时data里的name和count都要监听，那么可以这么写：

  $scope.$watch('data',function(){
  },true)

如果不加第三个参数，那么只会监听data，只有当data引用改变时才会触发。

因此当需要监听一些引用对象需要把第三个参数设置成true。

总结

以上所述是小编给大家介绍的Angular中的$watch方法详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • AngularJS中$apply方法和$watch方法用法总结

    本文实例总结了AngularJS中$apply方法和$watch方法用法.分享给大家供大家参考,具体如下: 引言 最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化,当时小编对这个方法不是很了解,所以在网上找了一些资料来学习一下,下面小编就给大家简单介绍一些AngularJS中Scope 提供$apply 方法传播Model 的变化和$watch方法监听module变化. $apply使用情景 AngularJS 外部的控制器(DOM 事件.外部的回调函数如 jQue

  • AngularJS中$watch和$timeout的使用示例

    前言 相信使用过Angular的小伙伴应该对$watch这个监听不陌生,它主要用于监听模型的变化,当你的模型部分发生变化时它会通知你.我在最近的平台管理开发中,也用到这个牛逼哄哄的Angular,在做filter的时候不可以避免的用到$watch监听.当时我的想法就是搜索的时候不需要点击搜索按钮,这样在用户体验上也是极好的,避免了输入后再次点击的操作步骤. 然后,当$watch监听的时候一开始代码是这样的 $scope.$watch('filterOptions', function (newV

  • AngularJs $parse、$eval和$observe、$watch详解

    $parse和$eval $parse和$eval这两个函数都可以解析表达式的值. 它们的区别在于$parse是一个服务, 可以注入使用. $eval是scope对象上的一个方法, 我们只能在能访问scope的场景下使用它. var getter = $parse('user.name'); var setter = getter.assign; var context = {user: {name: 'John Doe'}; var locals = {user: {name: 'Doe Jo

  • AngularJS中的$watch()，$digest()和$apply()区分

    AngularJS $scope里面的$watch(),$digest()和$apply()是AngularJS的核心函数,学习AngularJS必须理解这几个函数. 在绑定$scope中的变量到view的时候,AngularJS自动在内部创建一个"Watch"."Watch"用于监听AngularJS scope中变量的改变.可以通过调用$scope.$watch()这个方法来创建"Watch". $scope.$digest()函数会循环访问

  • 浅谈angular.js中实现双向绑定的方法$watch $digest $apply

    Angular.js 中的特性,双向绑定. 多么神奇的功能,让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $apply 他们的区别是什么,我们来介绍下: $watch 这是一个监听 scope 上数据的监听器 方法说明: $scope.$watch('参数',function(newValue,oldValue){ //逻辑处理 }) 上面我们就是创建了一个监听器. '参数' 就是$scope

  • Angular中的$watch方法详解

    在$apply方法中提到过脏检查,首先apply方法会触发evel方法,当evel方法解析成功后,会去触发digest方法,digest方法会触发watch方法. (1)$watch简介 在digest执行时,如果watch观察的的value与上一次执行时不一样时,就会被触发. AngularJS内部的watch实现了页面随model的及时更新. $watch方法在用的时候主要是手动的监听一个对象,但对象发生变化时触发某个事件. (2)watch方法用法 $watch(watchFn,watch

  • 基于angular中的重要指令详解($eval,$parse和$compile)

    在angular的服务中,有一些服务你不得不去了解,因为他可以说是ng的核心,而今天,我要介绍的就是ng的两个核心服务,$parse和$compile.其实这两个服务讲的人已经很多了,但是100个读者就有100个哈姆雷特,我在这里讲讲自己对于他们两个服务的理解. 大家可能会疑问,$eval呢,其实他并不是一个服务,他是scope里面的一个方法,并不能算服务,而且它也基于parse的,所以只能算是$parse的另一种写法而已,我们看一下ng源码中$eval的定义是怎样的就知道了 $eval: fu

  • Angular 中 select指令用法详解

    最近在angular中使用select指令时,出现了很多问题,搞得很郁闷.查看了很多资料后,发现select指令并不简单,决定总结一下. select用法: <select ng-model="" [name=""] [required=""] [ng-required=""] [ng-options=""]> </select> 属性说明: 发现并没有ng-change属性 ng-

  • angularjs中的$eval方法详解

    在controller中定义了一个变量 $scope.a_1 = "abc"; 想在view里面动态输出,因为这个数字是动态的,这么输出肯定是不行的{{'a_' + '1'}},因为输出来的是a_1这个字符串,而不是a_1这个变量的值 想输出a_1这个变量的值,可以使用$eval方法:{{$eval('a_' + '1')}} $eval是作为scope的方法来使用的,在controller中使用的话,是这么使用:$scope.$eval() 以上这篇angularjs中的$eval方

  • Python中格式化format()方法详解

     Python中格式化format()方法详解 Python中格式化输出字符串使用format()函数, 字符串即类, 可以使用方法; Python是完全面向对象的语言, 任何东西都是对象; 字符串的参数使用{NUM}进行表示,0, 表示第一个参数,1, 表示第二个参数, 以后顺次递加; 使用":", 指定代表元素需要的操作, 如":.3"小数点三位, ":8"占8个字符空间等; 还可以添加特定的字母, 如: 'b' - 二进制. 将数字以2为基

  • Android中SQLite 使用方法详解

    Android中SQLite 使用方法详解

    Android中SQLite 使用方法详解 现在的主流移动设备像android.iPhone等都使用SQLite作为复杂数据的存储引擎,在我们为移动设备开发应用程序时,也许就要使用到SQLite来存储我们大量的数据,所以我们就需要掌握移动设备上的SQLite开发技巧.对于Android平台来说,系统内置了丰富的API来供开发人员操作SQLite,我们可以轻松的完成对数据的存取. 下面就向大家介绍一下SQLite常用的操作方法,为了方便,我将代码写在了Activity的onCreate中: @Ov

  • Android 中 onSaveInstanceState()使用方法详解

    Android 中 onSaveInstanceState()使用方法详解 覆盖onSaveInstanceState方法,并在onCreate中检测savedInstanceState和获取保存的值 @Override protected void onSaveInstanceState(Bundle outState) { outState.putInt("currentposition", videoView.getCurrentPosition()); super.onSave

  • 关于redux-saga中take使用方法详解

    本文介绍了关于redux-saga中take使用方法详解,分享给大家,具体如下: 带来一个自己研究好久的API使用方法. redux-saga中effect中take这个API使用方式,用的多的是call,put,select,但take这个平常还真没什么机会用上,也不清楚在哪里使用才好,不管怎么样,既然是redux-saga写出来的,肯定是有他的用法的,不管37 21,先学会使用方法再说. 先看看介绍: take take的表现同takeEvery一样,都是监听某个action,但与takeE

  • Hybris在idea中debug配置方法详解

    1.启动hybris服务的命令用 hybrisserver.bat debug 2.在idea中配置remote debug 端口号默认不变选择所要监听的服务(如下图) 点击小爬虫启动debug服务访问接口时,即可用debug调试程序了! 总结 到此这篇关于Hybris在idea中debug配置方法详解的文章就介绍到这了,更多相关Hybris在idea中debug配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

  • java9在interface中定义私有方法详解

    一.Java 9接口定义私有方法 从Java 9开始,我们可以在Interface接口中添加private的私有方法和私有静态方法.这些私有方法将改善接口内部的代码可重用性.例如,如果需要两个默认方法来共享代码,则私有接口方法将允许它们共享代码,但不将该私有方法暴露给它的实现类调用(后文中会给大家举一个例子). 在接口中使用私有方法有四个规则: 接口中private方法不能是abstract抽象方法.因为abstract抽象方法是公开的用于给接口实现类实现的方法,所以不能是private. 接口

随机推荐