浅谈Angular.js中使用$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监听 # watch # angularjs # 关于angular js_$watch监控属性和对象详解 # AngularJS中$apply方法和$watch方法用法总结 # AngularJS中watch监听用法分析 # AngularJs $parse、$eval和$observe、$watch详解 # AngularJS中$watch和$timeout的使用示例 # AngularJS中的$watch() # $digest()和$apply()区分 # Angular中使用$watch监听object属性值的变化(详解) # 是一个 # 如果你 # 太多 # 将会 # 将其 # 它可以 # 你应该 # 可以使用 # 设置为 # 它会 # 一个普通 # 稍后 # 大家多多 # 举个 # 象中 # 而不是 # 使用它 # listener # watchExpression # span

返回目录在线咨询

上一篇：SSL证书对网站安全有多重要？
下一篇：php静态网页设计怎么实现图片瀑布流布局_php静态网页设计瀑布流CSS与JS实现【攻略】

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

浅谈Angular.js中使用$watch监听模型变化

您的项目需求