AngularJS - $ scope.value复位不改变模板值（随机行为） [英] AngularJS - reset of $scope.value doesn't change value in template (random behavior)

问题描述

看看例子就AngularJS 1.0 http://jsfiddle.net/2NJ7y/3/ （版本。 1）。有简单的应用程序，它正在等待进入的幸运号码。如果数等于7，我重置幸运号码为空。如果我输入数字7几次，有时/随机的幸运数字留在输入字段中。为什么？这种现象如何解决？谢谢你。

Take a look at example on http://jsfiddle.net/2NJ7y/3/ (version of AngularJS 1.0.1). There is simple app, which is waiting for entering of lucky number. If the number is equal to 7, I reset lucky number to null. If I enter number 7 several times, sometime/randomly the lucky number stay in input field. Why? How this behavior solve? Thanks.

推荐答案

我已经做了一些调试。

首先，我的幸运数字留在输入字段不是随机。

Firstly for me lucky number stay in input field not randomly.

进入3（型号== 3，输入== 3） => 进入7（警报，型号== NULL，输入= ）

=> 进入3（型号== 3，输入== 3） => 删除3（型号==，输入= =）

=> 进入7（警报，型号== NULL，输入=）

=> 进入7（警报，型号== NULL，输入=7）

7留在输入字段只有previous模型值为空。

7 stay in input field only if previous model value was null.

会发生什么：当你输入7解雇这是由处理输入事件<一个href=\"https://github.com/angular/angular.js/blob/2af0348cea016e7081eab3189ae89f13f0e08213/src/ng/directive/input.js#L372\">listener功能 <一个href=\"https://github.com/angular/angular.js/blob/2af0348cea016e7081eab3189ae89f13f0e08213/src/ng/directive/input.js#L747\">input指令。监听器函数调用<一个href=\"https://github.com/angular/angular.js/blob/2af0348cea016e7081eab3189ae89f13f0e08213/src/ng/directive/input.js#L968\">$setViewValue. $ setViewValue设置$ viewValue，$ modelValue，模型值和调用$ viewChangeListeners（ngChangeDirective <一个href=\"https://github.com/angular/angular.js/blob/2af0348cea016e7081eab3189ae89f13f0e08213/src/ng/directive/input.js#L1122\">simply增加了处理以$ viewChangeListeners）。警报显示，luckynumber设置为null。毕竟，如果luckynumber从previous值不同的previous脏检查<一href=\"https://github.com/angular/angular.js/blob/2af0348cea016e7081eab3189ae89f13f0e08213/src/ng/directive/input.js#L998\">$watch处理器和<一个href=\"https://github.com/angular/angular.js/blob/2af0348cea016e7081eab3189ae89f13f0e08213/src/ng/directive/input.js#L409\">$render被称为

What happens: when you input 7 fired input event which is handled by listener function of input directive. Listener function calls $setViewValue. $setViewValue sets $viewValue, $modelValue, model value and calls $viewChangeListeners (ngChangeDirective simply adds handler to $viewChangeListeners). Alert is displayed, luckynumber is set to null. After all that if luckynumber differs from previous value on previous dirty checking $watch handler and $render are called.

在我的例子$渲染所谓如果previous模型值是3或。如果previous模型值为空$渲染不叫。

In my examples $render called if previous model value was "3" or "". If previous model value was null $render isn't called.

为什么要延迟0 $超时工作原理：当你调用0延时功能$超时不断变化luckynumber为空时的事件队列（在浏览器中所有的JavaScript执行在单个线程）。 $ viewChangeListener不是模型值从7到空改变。 $消化完成。然后$超时处理程序被调用。模型值设置为null。 $看处理程序和$渲染调用。 $显示一组输入值。

Why $timeout with 0 delay works: when you call $timeout with 0 delay function with changing luckynumber to null is postponed at the end of events queue (all javascript in a browser executes on a single thread). $viewChangeListener is not change model value from 7 to null. $digest finishes. Then $timeout handler is called. Model value is set to null. $watch handler and $render are called. $render sets input value to "".

这篇关于AngularJS - $ scope.value复位不改变模板值（随机行为）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！