`

angularJS $scope.$watch的使用

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



$watch(watchExpression, listener, objectEquality);

每个参数的说明如下:

引用:http://yuankeqiang.lofter.com/post/8de51_1454f93
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);
分享到:
评论

相关推荐

    AngularJS学习笔记.pdf

    - **解释**:这个示例中,`BoxCtrl` 控制器监听 `ng-click` 事件来改变宽度和高度,同时通过 `$watch` 方法监视 `$scope` 上的 `w` 和 `h` 属性的变化,并自动更新 DOM 元素的尺寸。 4. **服务 (Services)** - **...

    angularJS 中$scope方法使用指南

    下面将详细说明如何在AngularJS中使用$scope方法。 ### $scope基本概念 在AngularJS中,$scope是每个控制器的子作用域对象,它是一个JavaScript对象,可以持有模型属性和方法。当你在视图中使用双大括号{{}}来绑定...

    AngularJS学习笔记

    **DOM操作**:在使用AngularJS时,尽管可以直接修改DOM结构,但通常建议避免这样做,除非非常清楚所进行的操作不会破坏AngularJS内部的状态管理机制。 #### 二、文档性质与学习路线 本学习笔记是作者邹业盛个人的...

    angularJS的分页控件

    为了优化性能,可以在数据服务返回的数据上使用`$watch`监听器,只在页码改变时更新视图: ```javascript $scope.$watch('currentPage + pageSize', function() { $scope.loadData(); }, true); ``` ### 6. 完整...

    angularjs-code.zip

    AngularJS的依赖注入机制允许我们在不关心组件如何创建的情况下,轻松地获取和使用它们。它通过`$injector`服务来实现。 以上只是AngularJS 1.x部分核心知识点的概述,实际应用中还涉及到更多高级特性,如模块化、...

    AngularJS 监听变量变化的实现方法

    AngularJS提供了一个名为`$watch`的服务,它是实现数据绑定和响应式编程的关键组件。`$watch`函数允许我们注册一个监听器,该监听器会在指定的表达式的值发生变化时被调用。下面的代码示例展示了如何使用`$watch`来...

    浅谈关于angularJs中使用$.ajax的注意点

    然而,有时开发者可能会选择在AngularJS应用中使用$.ajax,可能是出于对jQuery某些功能的依赖,比如更灵活的跨域处理或特定的数据类型设置。本文将探讨在AngularJS中使用$.ajax时需要注意的关键点。 首先,从设计...

    angularJS二级联动选择菜单

    在本文中,我们将深入探讨如何使用AngularJS实现二级联动选择菜单。AngularJS,作为一个强大的前端JavaScript框架,提供了丰富的功能和工具来构建动态、交互式的Web应用程序。二级联动选择菜单是常见的用户界面元素...

    angularjs 中$apply,$digest,$watch详解

    在上述代码中,虽然没有显式使用`$watch`,但AngularJS自动为所有`ng-bind`指令创建了内部的`$watch`,确保模型的更新能反映到视图上。 在示例代码中,我们有两个更新时钟的方法: - 第一种使用`$timeout`,内部...

    浅谈angularJS的$watch失效问题的解决方案

    本文介绍了浅谈angularJS的$watch失效问题的解决方案,分享给大家,顺便给自己留个笔记 $watch方法,它可以帮助我们在每个scope中监视其中的变量。 $watch 单一的变量 对于普通的变量时,如数字,字符串等,直接如下...

    AngularJS实现一次监听多个值发生的变化

    一、$watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你。 $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchExpression:监听的对象,...

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

    当时小编对这个方法不是很了解,所以在网上找了一些资料来学习一下,下面小编就给大家简单介绍一些AngularJS中Scope 提供$apply 方法传播Model 的变化和$watch方法监听module变化。 $apply使用情景 AngularJS 外部的...

    angularjs 源码解析之scope

    在ng的生态中scope处于一个核心的地位,ng对外宣称的双向绑定的底层其实就是scope实现的,本章主要对scope的watch机制、继承性以及事件的实现作下分析。 监听 1. $watch 1.1 使用 // $watch: function(watchExp, ...

    angularJs Demo

    初级学习上手使用: 01-数据绑定.html 02-控制器.html 03-ng-bind.html 04-$scope中的$apply方法.html 05-$scope中的$watch方法.html 06-购物车练习.html 07-模块.html 08-$provide.provider自定义服务....

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

    AngularJS $scope里面的$watch(),$digest()和$apply()是AngularJS的核心函数,学习AngularJS必须理解这几个函数。 在绑定$scope中的变量到view的时候,AngularJS自动在内部创建一个”Watch”。”Watch”用于监听...

    AngularJS API常用方法示例

    `$scope`是AngularJS中连接控制器与视图的核心,它承载着应用的数据模型。你可以通过在控制器中定义属性来创建或修改`$scope`上的数据,这些变化会实时反映在关联的HTML模板上。 ```javascript app.controller('...

    angularJS理论与实战.ppt

    4. 性能优化:合理使用$scope.$watch,避免过多的脏检查;利用$compile服务提前编译DOM,减少页面加载时间。 通过"angularJS理论与实战.ppt"的学习,开发者不仅能理解AngularJS的基本原理,还能学会如何运用这些...

    Angular中的$watch方法详解

    Angular中的$watch方法是AngularJS框架中的一种重要机制,用于监听模型的变化,并在变化时触发某些事件。下面将对$watch方法进行详细的介绍。 一、$watch方法简介 $watch方法是AngularJS框架中的一种机制,用于...

Global site tag (gtag.js) - Google Analytics