$watch vs 花括号 - $watch 不会捕获范围内变量的变化答案

【问题标题】：$watch vs curly braces - $watch does not catch change of a variable on scope$watch vs 花括号 - $watch 不会捕获范围内变量的变化
【发布时间】：2016-07-07 19:33:21
【问题描述】：

我在 AngularJS 中遇到问题。我将尝试简化事情以解释我遇到的问题。

我创建了一个应该处理图像上传的指令。流程是这样的。

如果图像存在，服务器将返回静态提供的图像的 url。 url 和指令是从服务器异步加载的，因此无法判断哪个会先加载。我传递了一个作为属性获得的变量

<my-directive vc-current-url="vm.data.profileURL"> </my-directive>

指令范围

scope : { "currentURL" : '=vcCurrentUrl' }

所以，在我的模板中，我可以 {{scope.currentURL}} 并且当它被加载时 - 它会显示出来。但是当加载该 url 时我必须做更多的事情 - 将它传递给另一个函数（原因）。很好，我只需添加一个观察者并等待它加载？但不是。

scope.$watch(scope.currentURL, function (newValue, oldValue) {
    console.log(' changed to ' + newValue + ' from ' + oldValue);
}, true);

console.log 被调用一次并打印出来

changed to undefined from undefined

我错过了什么？

哦，我正在使用 Angular 1.5。

编辑几个答案是我没有看正确的变量。下面的代码不起作用，它会抛出

Error: currentURL is not defined

代码：

scope.$watch('currentURL', function (newValue, oldValue) {
    console.log(' changed to ' + newValue + ' from ' + oldValue);
});

【问题讨论】：

Console.log 将立即执行，而不是等待任何其他代码，这是您未定义的来源，仅供参考。
没有。为什么会立即执行？它被放置在inside 回调函数中，当变量更改时应该调用该回调函数。就此而言，控制台日志会在大括号获取更改并打印出来查看的同时调用
您可以尝试将watch 包裹在$timeout 中，它会在DOM 渲染后运行。它可能会有所帮助
同样将您的代码更改为 if(!angular.equals(newValue, oldValue)){ console.log(' changed to ' + newValue + ' from ' + oldValue);} 并查看打印的内容。因为它只会在您的值发生变化时记录。
我确定这真的很简单，我认为人们提到手表不正确的原因是由于声明："currentURL" : '=vcCurrentUrl'，因为我一直将其视为currentURL : '=vcCurrentUrl'。

标签： javascript angularjs

【解决方案1】：

首先，这是你观察价值的方式

scope.$watch('currentURL'

其次，这就是你的作用域 def 的样子

scope : { "currentURL" : '=vcCurrentUrl' }

所以你对视图的指令应该是

<my-directive data-vc-current-url="vm.data.profileURL"> </my-directive>

【讨论】：

first - nope Error: currentURL is not defined if I put what you say 第二是有问题的错字 - 名称和视图具有相同的名称。我编辑了问题
@Rouz 你的意思是scope.$watch('"currentURL"'？
此解决方案将起作用。错误是我放了 scope.$watch(scope.currentURL ... 而不是 scope.$watch('currentURL'

【解决方案2】：

试试这个：

scope.$watch('currentURL', function (newValue, oldValue) {
    console.log(' changed to ' + newValue + ' from ' + oldValue);
});

您没有正确引用范围变量。

【讨论】：

正如我已经对发布（并删除）他的答案的伙伴所说的那样 - 不，这是不对的。如果我这样做，我会抛出这个错误 Error: currentURL is not defined
我想向你和 Alon 道歉，你是对的，而我不是。我将发布一个答案来描述我错了什么以及我是如何发现它的。
@AlonEitan 如果您在变量名称周围有撇号，请成为我的客人，我会支持它

【解决方案3】：

所以我错了。

Austn 和 Alon 是对的，但我没有注意到他们在变量名周围有撇号，而我没有。

在对话之后，我尝试将我的观察者功能置于 $timeout 中。变量在下一个循环中加载，我收到了一些奇怪的解析消息（url.com/variable.jpg 不是有效的 var 名称）。

所以那时我意识到，如果您不将 var name 放在撇号内，它将使用 var 值（或未定义）。

那么为什么我会得到那个控制台日志，而实际上我所做的是

$watch(undefined, function() {...});

并且观察者通常在初始化时被调用一次。谢谢大家的帮助。

【讨论】：