AngularJS - $ scope.valueのリセットがテンプレートの値を変更しない（ランダムな動作）

Question

http://jsfiddle.net/2NJ7y/3/（AngularJS 1.0.1のバージョン）の例を見てください。幸運な番号の入力を待っている単純なアプリがあります。数字が7に等しい場合、私はラッキーナンバーをヌルにリセットします。数字7を何度か入力すると、入力フィールドに偶然/ランダムに幸運な数字が残ります。どうして？この動作はどのように解決されますか？ありがとう。

Answer 1

あなたは、単に

$scope.luckynumber = undefined; 

前にアラートに置く場合は、競合状態を解消しませんが、7が適切にクリアされないように、あなたはそれを変更できますが、時にはあなたは、二度の警告を取得します。

エラーを表示するようにアラートコードを冪等のものに置き換えた場合、この問題は重要ではありません。

Answer 2

私はいくつかのデバッグを行いました。

私にとっては、まずラッキーナンバーは入力欄に無作為にとどまりません。

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

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

=>前のモデル値がNULLであった場合にのみ、入力フィールドに=>enter 7 (alert, model==null, input="7")

7滞在enter 7 (alert, model==null, input="")

。

を何が起こる：あなたは入力7がinput directiveのlistener functionによって処理された入力イベントを発射したとき。リスナー関数呼び出しは$setViewValueです。 $ setViewValueは$ viewValue、$ modelValue、モデル値を設定し、$ viewChangeListeners（ngChangeDirective simply adds handler〜$ viewChangeListeners）を呼び出します。アラートが表示され、luckynumberがnullに設定されます。結局のところluckynumberが以前のダーティチェックで以前の値と異なる場合$watch handlerと$renderが呼び出されます。

私の例では、以前のモデル値が "3"または ""だった場合に$ renderが呼び出されました。以前のモデル値がnullの場合、$ renderは呼び出されません。 0遅延で$タイムアウトがの作品はなぜ

：あなたはevents queueの終わりに延期されてnullにluckynumberを変えて0遅延機能付き$タイムアウトを呼び出すとき（ブラウザですべてのJavaScriptは単一のスレッド上で実行されます）。 $ viewChangeListenerは、7からnullへのモデル値を変更しません。 $ digestが終了します。 $ timeoutハンドラが呼び出されます。モデル値はnullに設定されています。 $ watchハンドラと$ renderが呼び出されます。 $ renderは入力値を ""に設定します。

Answer 3

最後に解決策です。 ng-changeの代わりに$ watchを使用してください：

$scope.$watch('luckynumber', function() { 
    if ($scope.luckynumber == 7) { 
     alert('The lucky number mustn\'t be equal 7.'); 
     $scope.luckynumber = null; 
    } 
}) 

Fiddle

この他の@Valentyn SO answerは私に、この問題を解決することを考えさせました。