angularjs - 如果已经存在，Angular 会创建一个新的观察者吗？-6ren

angularjs - 如果已经存在，Angular 会创建一个新的观察者吗？

转载作者：行者123 更新时间：2023-12-04 04:16:46

24

4

考虑:

angular
  .module('app', [])
  .controller('MainController', function($scope) {
    $scope.$watch('bool', function(newVal, oldVal) {
    });
    console.log($scope);
  });

和

<body ng-controller='MainController'>
  <p ng-class="{'blue': bool, 'red': !bool}">ngClass</p>
  <p ng-show='bool'>ngShow</p>
  <input type='checkbox' ng-model='bool' />
</body>

plnkr of above

似乎创建了 3 个观察者:

来自 $scope.$watch .

来自 ngShow .

来自 ngClass .

(注意:数据绑定(bind)中涉及的指令 use $scope.$watch 内部。)

我会认为，因为他们都在看 bool属性，只有一个观察者，它会有多个监听器回调。

编辑:它是不是在说，“有 bool 改变了吗？如果是，运行 cb1 。有 bool 改变了吗？如果是这样运行 cb2 。有 bool 改变了吗？如果是这样运行 cb3 。 "还是它在说，“ bool 是否发生了变化？如果是，请运行 cb1、 cb2 和 cb3。”如果是前者，为什么要超过后者？

问题:

我的解释正确吗？实际上是否有多个 watch 正在注册？

对性能有何影响？

奖励:如果我的解释是正确的并且正在添加多个观察者，为什么会这样设计？为什么要查找 bool 的更改3次而不是1次？

2) 的示例 - 假设您要确保表单中的两个密码匹配，如果不匹配，则显示错误。假设您已经拥有:

ng-class="{invalid: myForm.myInput1.$touched && ctrl.myInput1  != ctrl.myInput2}"

说你想用 $setValidity更新表格的有效性。这样做可能是个好主意:

ng-class="{invalid: myForm.myInput1.$touched && ctrl.functionToCheckInputs(myForm)}"

并调用 $setValidity functionToCheckInputs 内部而不是使用 $scope.$watch做 $setValidity在里面？因为后者增加了一个额外的观察者(大概)。

最佳答案

有多个 $watchers 正在注册。事实上，即使你有 2 个确切的表达式:

$scope.$watch("foo", cb1)
$scope.$watch("foo", cb2)

你仍然会得到 2 个 $watchers。

要回答您的问题 - 是前一种情况，即“如果 "foo" 表达式更改，运行 cb1 ，如果 "foo" 表达式更改，运行 cb2 等...为什么？因为，任何 $watcher 都可能更改 $scope.foo 的返回值；不仅在回调中，而且在表达式本身中。Angular 每次都需要重新评估表达式以解决这种可能性。

摘要循环的长度对性能起着重要作用。

一、是 $watchers 的数量，它会导致被监视的表达式或函数求值。因此，减少 $watcher 的数量，例如更喜欢单向观看而不是双向观看，或者在合适的情况下使用一次性观看，可以提高性能。

第二 , 是被监视函数的复杂度。这些函数应该非常快——理想情况下，不超过 getter。例如，避免以下情况:

<div ng-class="{active: isActive(id)}">

$scope.isActive = function(id){
   for (var i=0; i<items.length; i++){
      if (items[i].id == id && items[0].active) return true;
   }
   return false;
};

关于angularjs - 如果已经存在，Angular 会创建一个新的观察者吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31569880/

24

4

0

文章推荐： web-services - Fiddler 阻止了一些 HTTPS 连接，如 Dropbox

文章推荐： command-line - 来自命令行的蓝牙

文章推荐： apache-spark - 群集中HADOOP_CONF_DIR的值

文章推荐： interface - UML2 : ports and interfaces in component diagrams

c# - 定时器不会死(已经!)
一段时间以来，我一直在做这个反复出现的噩梦(阅读 - 我的应用程序中的错误)。出于某种原因，某个计时器在我停止后继续发送“Elapsed”事件，即使在事件本身计时器“承认”已被禁用!检查一下: /
git:我如何找到两个分支的共同祖先......已经 merge
为了找到 2 个 git 分支的共同祖先，需要做的是: git merge-base branch another_branch 好的。但是……如果两个分支都已经 merge 了怎么办？当我在这种情况
javascript - Javascript 已经 react 了吗？
关闭。这个问题是opinion-based .它目前不接受答案。想改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 1年前关闭。 Improve this
iphone - iOS 相机捕捉 View 已经？
我想要一个相机 View ，可以将图像捕获到本地文件或让用户从本地照片库中选择图像。我想也许有人为此编写了很好的库/代码。也许我可以利用它。已经有好的了吗？谢谢。我只是避免重新发明轮子:) 最佳答案
git rebase 已经 merge 了分支？
我从 master 分支创建了一个功能分支。之后有来自功能分支的提交 [F1]。 [F1] -- Feature Branch / [M1]-[M2
c# - Linux 上的 WPF(已经)可能吗？
我喜欢使用 .NET 进行编程，尤其是 C# 3.0、.NET 3.5 和 WPF。但我特别喜欢的是 Mono .NET 确实与平台无关。现在我听说了 Mono 中的 Olive 项目。我找不到某种
git - 如何调和分离的头和起源/主人？已经 checkout 旧哈希
介绍和搜索所以我认为我犯了一个严重的错误，我很担心。我已经分析了独立负责人的论坛，我已经接近找到答案，但场景太具体，不适用于我所在的位置。如果您找到可以回答我的问题的特定主题，请链接我。例如:Ho
git - 如何重新 merge 已经 merge 的分支？
我有一个类似于下图的提交图。标记为 * 的提交表示大量提交。 A* | B--------- | | C* D* master 和 cor
c# - Linux 上的 WPF(已经)可能吗？
我喜欢使用 .NET 进行编程，尤其是 C# 3.0、.NET 3.5 和 WPF。但我特别喜欢的是 Mono .NET 确实与平台无关。现在我听说了 Mono 中的 Olive 项目。我找不到某种
asp.net - 已经 Html 编码的 Html 编码值
我们最近接手了一个 .NET 项目，在查看 db 后，我们在某些列中有以下内容: 1)某些列具有诸如" & etc etc 2) 有些有标签和其他非 html 编码的标签这些数据
flutter - 未处理的异常:不良状态: future 已经 flutter 朔迷离
你好，当我导航到应用程序中的另一个页面时出现此错误我不知道为什么这个错误出现 #0 _AsyncCompleter.complete (dart:async/future_impl.da
已经 CRC32 处理的数据的 CRC32 附加了 CRC 数据
我使用以下 C 算法计算数据的 CRC32: #define CRC32_POLYNOM_REVERSED 0xEDB88320 uint32 calcCrc32(uint8* buffer, u
python - 是否有(已经)一种方法来比较 2 个模型实例，一个字段一个字段，看它们是否相等？
我试图在我的一个测试中断言模型中的字段没有改变。我知道从哲学上这是不正确的，但由于我控制了我需要知道的所有变量，所以我只想检查我的数据库条目是否没有改变。我愿意接受一个解决方案，该解决方案可以将其转
git - 你的分支和 'origin/master' 已经 fork ，所有冲突都已修复但你仍在 merge
我是 GitHub 的新手。并通过 Eclipse 使用它我们是两个人在开发一个应用程序。当我在 Git shell 中检查 git status 时，我得到以下状态。 On branch maste
c++ - 已经 "EOF"ed ifstream 上的 peek() 是否继续返回 EOF？
简单代码: std::ifstream file("file.txt"); std::string line; while(getline(file,line)) ; //exhaust file
android - Gradle DSL 方法未找到 : 'compile()' - Dependencies are in Module level build. gradle 已经
是的，我又找不到这个 Gradle DSL 方法:'compile()' 问题。我检查了我有: buildscript { repositories { jcenter()
jquery - 如何使用 jQuery 覆盖(已经)定义的带有嵌套 anchor 标记的 DIV 类的 CSS 样式？
HTML: articles CSS: #main_menu { float: left; padding-top: 10px; vertical-align: m

首页

博学

6Ren·AI

商城

angularjs - 如果已经存在，Angular 会创建一个新的观察者吗？