AngularJS - 重置$ scope.value不会更改模板中的值(随机行为)

Question

看看http://jsfiddle.net/2NJ7y/3/(AngularJS 1.0.1的版本)上的示例.有一个简单的应用程序,正在等待输入幸运数字.如果数字等于7,我将幸运数字重置为空.如果我多次输入数字7,有时/随机的幸运数字会保留在输入字段中.为什么？这种行为如何解决？谢谢.

Answer 1

我做了一些调试.

首先对我来说,幸运数字不是随机留在输入字段中.

enter 3 (model==3, input==3) => enter 7 (alert, model==null, input="")

=> enter 3 (model==3, input==3)=>remove 3 (model=="", input=="")

=> enter 7 (alert, model==null, input="")

=> enter 7 (alert, model==null, input="7")

7仅当先前的模型值为null时才保留在输入字段中.

会发生什么:当你输入7解雇这是由处理输入事件监听器函数的输入指令.监听器函数调用$ setViewValue.$ setViewValue设置$ viewValue,$ modelValue,模型值并调用$ viewChangeListeners(ngChangeDirective 只是将处理程序添加到$ viewChangeListeners).显示警报,luckynumber设置为null.毕竟,如果luckynumber与以前的脏检查$ watch处理程序和$ render的先前值不同,则调用它.

在我的示例中,如果之前的模型值为"3"或"",则调用$ render.如果以前的模型值为null,则不调用$ render.

为什么带有0延迟的$ timeout工作:当你使用0延迟函数调用$ timeout时,将luckynumber更改为null将在事件队列结束时推迟(浏览器中的所有javascript都在单个线程上执行).$ viewChangeListener不会将模型值从7更改为null.$ digest结束.然后调用$ timeout处理程序.模型值设置为null.$ watch handler和$ render被调用.$ render将输入值设置为"".

Answer 2

如果你简单地说

$scope.luckynumber = undefined;

在警报之前，您不会消除竞争条件，但您确实会更改它，以便 7 确实被正确清除，但有时您会收到两次警报。

如果警报代码被替换为幂等的代码，例如更改 DOM 以显示错误，那么这个问题就不重要了。