首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

多个$scope.$watch在Angular JS中不工作

在AngularJS中,$scope.$watch用于监视数据模型的变化,并在变化发生时执行相应的操作。然而,当多个$scope.$watch同时存在时,可能会出现不工作的情况。

这种情况通常是由于AngularJS的脏检查机制引起的。AngularJS使用脏检查来追踪数据模型的变化,并在变化发生时更新视图。当发生数据变化时,AngularJS会遍历所有的$scope对象,检查每个$scope中的所有$watch表达式是否发生变化。如果有变化,AngularJS会执行相应的操作。

然而,当多个$scope.$watch同时存在时,可能会导致脏检查机制无法正常工作。这是因为AngularJS在每个脏检查循环中只会检查每个$scope中的$watch一次。如果在同一个脏检查循环中有多个$watch需要被检查,只有第一个$watch会被执行,而其他的$watch则会被忽略。

为了解决这个问题,可以使用$timeout函数将多个$scope.$watch延迟执行,以确保每个$watch都能被检查到。具体做法是将每个$watch放在$timeout函数中,并设置一个延迟时间,使得每个$watch都能在不同的脏检查循环中被执行。

以下是一个示例代码:

代码语言:javascript
复制
$scope.$watch('data1', function(newValue, oldValue) {
    // 监听data1的变化
});

$timeout(function() {
    $scope.$watch('data2', function(newValue, oldValue) {
        // 监听data2的变化
    });
}, 0);

$timeout(function() {
    $scope.$watch('data3', function(newValue, oldValue) {
        // 监听data3的变化
    });
}, 0);

在上述代码中,我们使用了$timeout函数将data2和data3的$watch延迟执行,确保它们能在不同的脏检查循环中被执行。

需要注意的是,$timeout函数会在下一个脏检查循环中执行,因此设置延迟时间为0时,实际上是在当前脏检查循环结束后立即执行。这样可以确保每个$watch都能被检查到。

总结起来,当多个$scope.$watch在AngularJS中不工作时,可以使用$timeout函数将其延迟执行,以确保每个$watch都能被检查到。这样可以解决脏检查机制无法正常工作的问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

AngularJS 中使用 $watch注意事项? 如果要监听的是一个对象,那还需要第三个参数 $scope.data.name = 'htf'; $scope....脏检查的范围 前面说到:angular 会对所有绑定到 UI 上的表达式做脏检查。其实, angular 实现内部,所有绑定表达式都被转换为 $scope.$watch()。...每个 $watch 记录了上一次表达式的值。有 ng-bind="a" 即有 $scope.$watch('a', callback),而 $scope....只要是页面,就不能直接调用原生的 JS 方法,因为这些并不存在于与页面对应的 Controller 的 $scope 。...避开了所谓的 child scope 原型继承带来的一些问题(原来别名ctrl就是定义$scope上的一个对象,这就是controller的一个实例,所有JS定义controller时绑定到this

7.8K40
  • 2、Angular JS 学习笔记 – 双向数据绑定和Scope概念

    这个延迟是必要的,因为它收集多个模型的更新到一次watch通知,保证watch通知时没有其他的watch已经在运行。...(Angular APIs对这个操作是隐含的,所以调用同步的任务不必刻意去调用apply,异步的工作例如http,timeout, Mutation observation / 变动的诊断处理 apply...查看ng-controller了解更多信息 作用域$watch性能考虑 作用域脏检查属性变动angular是一个常规的操作,所以脏检查函数需要尽可能的快。...一个显式的调用只有实现自定义事件的会调用使用,或在工作第三方的库的回调。 进入Angular执行上下文通过调用scope....angular离开这个执行上下文,并且结束keydown时间js框架的使用。 浏览器重新渲染这个视图基于更新的文本。

    13.2K20

    前端三大框架vue,angular,react大杂烩

    像ember.js是基于setter,getter的观测机制,    $scope.$watch函数,监视一个变量的变化。...$watch(视图到模型)以及$scope.$apply(模型到视图),还有$scope.$digest    调用$scope....$watch时只为它传递了一个参数,无论作用域中的什么东西发生了变化,这个函数都会被调用。ng-model,这个函数被用来检查模型和视图有没有同步,如果没有同步,它将会使用新值来更新模型数据。...$watch()    angularjs双向绑定,有2个很重要的概念叫做dirty check,digest loop,dirty check(脏检测)是用来检查绑定的scope的对象的状态的...2、视图渲染 Angular1    AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM, DOM结构成为AngularJS编译器的输入。

    3K90

    前端三大框架vue,angular,react大杂烩

    像ember.js是基于setter,getter的观测机制,    $scope.$watch函数,监视一个变量的变化。...$watch(视图到模型)以及$scope.$apply(模型到视图),还有$scope.$digest    调用$scope....$watch时只为它传递了一个参数,无论作用域中的什么东西发生了变化,这个函数都会被调用。ng-model,这个函数被用来检查模型和视图有没有同步,如果没有同步,它将会使用新值来更新模型数据。...$watch()    angularjs双向绑定,有2个很重要的概念叫做dirty check,digest loop,dirty check(脏检测)是用来检查绑定的scope的对象的状态的...2、视图渲染 Angular1    AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM, DOM结构成为AngularJS编译器的输入。

    2.1K60

    脏值检测(代表:angular1)前面说

    单向数据的小例子,首先我们on里面加入事件a,回调是a.innerHTML = str,然后我们可以改变model层的时候,顺便触发一下(emit(‘a’)),不就可以做到M->V的反映了吗?...而我们前面的vue,当我们控制台改了数据,就可以马上反映到v层。angular并没有这个操作,也没有意义。...angular1,私有变量以$$开头,$$watch是一个存放很多个绑定的对象的数组,用$watch方法来添加的,每一个被绑定的对象属性是:变量名、变量旧值、一个函数(用来返回变量新值)、检测变化的回调函数...++; }) scope....因为digest经常被执行,而且每个digest运行了所有的$watch,再加上用户一般不会创建10个以上链状的监听器。 angular的处理办法是 $scope.prototype.

    1.6K40

    AngularJS快速入门

    2016新年初始,正好有一些富余时间,正好学习下这个被称为就是“”两个大括号“”的前端框架(当前已经非常成熟,国内大部分公司的部分项目均已使用),补补我薄弱无比的前端技术,当目前为止,写JS代码仍然是非常的抓瞎.../Scripts/angular.js"> 18 19 var app = angular.module('myApp', []); 20 app.controller...表单输入 框架中使用表单元素非常简单,可以通过ng-model将表单元素绑定到模型属性上,达到双向绑定的目的,这部分和.NET的数据绑定效果一致;表单提交时,ng-submit会自动阻止浏览器默认的...POST操作;$watch可以监视Model具体的属性和字段,而ng-change主要用来检视表单元素;ng-show和ng-hide用于显隐元素,菜单场景下应用广泛 1 <body ng-app...其实不然,之前提取非侵入式的概念也是因为当时前端开发的痛点:不同浏览器对js的支持不同,运行方式也不同;事件处理器都引用全局命名空间的函数,集成时存在命名冲突;事件监听器绑定数据结构和行为,难以维护。

    2.5K50

    从单向到双向数据绑定

    单向数据的小例子,首先我们on里面加入事件a,回调是a.innerHTML = str,然后我们可以改变model层的时候,顺便触发一下(emit(‘a’)),不就可以做到M->V的反映了吗?...脏值检测(代表:angular1) 前面说的定时器双绑是扯淡 前面特地埋了个坑,关于Angular脏检查,并不是一些人想象的那样子用定时器周期性进行脏检测(我前面写的那个超级简单的双绑就是人们传闻的angular...而我们前面的vue,当我们控制台改了数据,就可以马上反映到v层。angular并没有这个操作,也没有意义。...++; }) scope....因为digest经常被执行,而且每个digest运行了所有的$watch,再加上用户一般不会创建10个以上链状的监听器。 angular的处理办法是 $scope.prototype.

    3.6K20
    领券