脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angular 监控数据模型变化的事件方法$watch

对angular 监控数据模型变化的事件方法$watch详解

 更新时间：2018年10月09日 10:58:38   作者：专注前端30年  
今天小编就为大家分享一篇对angular 监控数据模型变化的事件方法$watch详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

$watch简单使用

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

$watch(watchExpression, listener, objectEquality);

每个参数的说明如下：

watchExpression：监听的对象，它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。

listener：当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)

objectEquality：是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它

举个栗子：

$scope.name = 'hello';
 
var watch = $scope.$watch('name',function(newValue,oldValue, scope){
  console.log(newValue);
  console.log(oldValue);
});
 
 
$timeout(function(){
  $scope.name = "world";
},1000);

$watch性能问题

太多的$watch将会导致性能问题，$watch如果不再使用，我们最好将其释放掉。

$watch函数返回一个注销监听的函数，如果我们想监控一个属性，然后在稍后注销它，可以使用下面的方式：

var watch = $scope.$watch('someModel.someProperty', callback);
//...
watch();

还有2个和$watch相关的函数：

$watchGroup(watchExpressions, listener);
$watchCollection(obj, listener);

以上这篇对angular 监控数据模型变化的事件方法$watch详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • AngularJS仿苹果滑屏删除控件

    AngularJS仿苹果滑屏删除控件

    前端开发中，为了对列表项进行快捷操作，有时就添个按钮来简单实现。但是，有时会发现按钮影响美观，甚至影响列表行的布局。稍在网上搜索无果，而写此仿苹果滑屏删除控件
    2016-01-01
  • AngularJS表达式讲解及示例代码

    AngularJS表达式讲解及示例代码

    本文主要讲解AngularJS表达式,这里整理了相关资料和提供示例代码以及实现效果图，有需要的小伙伴可以参考下
    2016-08-08
  • Angularjs中三种数据的绑定策略(“@”，“=”，“&”)

    Angularjs中三种数据的绑定策略(“@”，“=”，“&”)

    在AngularJS的指令中存在着三种绑定策略，他们分别是’=’,’@’,’&’。下面这篇文章主要介绍了Angularjs中这三种数据的绑定策略，有需要的朋友们可以参考借鉴，下面来一起看看吧。
    2016-12-12
  • 详解Angular5 路由传参的3种方法

    详解Angular5 路由传参的3种方法

    这篇文章主要介绍了详解Angular5 路由传参的3种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Angular @Injectable注解的工作原理解析

    Angular @Injectable注解的工作原理解析

    这篇文章主要为大家介绍了Angular @Injectable注解的工作原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • 详解Angular 4.x 动态创建组件

    详解Angular 4.x 动态创建组件

    本篇文章主要介绍了详解Angular 4.x 动态创建组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • Angular动态绑定样式及改变UI框架样式的方法小结

    Angular动态绑定样式及改变UI框架样式的方法小结

    AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。这篇文章主要介绍了Angular动态绑定样式及改变UI框架样式的方法小结,需要的朋友可以参考下
    2018-09-09
  • Angular发布1.5正式版，专注于向Angular 2的过渡

    Angular发布1.5正式版，专注于向Angular 2的过渡

    Angular团队最近发布了Angular 1.5的正式版，该版本实现了一次重大的升级，它让仍在使用1.X版本的开发者将能够更容易地过渡到Angular 2的开发
    2016-02-02
  • Angularjs实现带查找筛选功能的select下拉框示例代码

    Angularjs实现带查找筛选功能的select下拉框示例代码

    这篇文章主要介绍了Angularjs实现带查找筛选功能的select下拉框的详细过程及示例代码，文中通过示例介绍的很详细，相信会对大家学习使用Angularjs具有一定的参考借鉴价值，有需要的朋友们可以一起来看看。
    2016-10-10
  • angular4+百分比进度显示插件用法示例

    angular4+百分比进度显示插件用法示例

    这篇文章主要介绍了angular4+百分比进度显示插件用法,结合实例形式分析了Angular4安装及使用百分比进度显示插件相关步骤与操作技巧,需要的朋友可以参考下
    2019-05-05

最新评论