なぜAngular JSが作成されるのですか？直接元のJS操作では、$ pristineは変更されません

Question

Angular JSの初期設定をテストして、ボタンの有効/無効属性などのフォーム項目の表示を調整します。

クリックイベントが発生すると、フォームの初期値が変更されますが、スコープ変数を直接操作すると、フォームのコントロールがその変数にバインドされていても変更されません。

次JSfiddleを参照してください。

http://jsfiddle.net/nicholasporter/2h7wT/3/

私はブール値の変更は、制御は、スコープ変数にバインドされたときに変更するフォーム手付かずの設定を引き起こすことを期待します。これをテストする良い方法はありますか？フォーム上で何も変更されていないときに、ボタンやその他のDOM要素を調整する良い方法はありますか？どのポインタについても事前に感謝します。 JSfiddleが機能しない場合のコードは次のとおりです。

<div ng-app ng-controller="MyCtrl"> 
    <form novalidate name="myForm"> 
    {{myBool}} 

     <input type="checkbox" ng-model="myBool" /> 
     <button ng-click="myBool=!myBool">JS set</button> 
     <div>Form Pristine:{{myForm.$pristine}}</div> 
    </form> 
    </div> 


<script> 
    function MyCtrl($scope){ 
     $scope.myBool = false; 
    } 
</script> 

Answer 1

ng-model指令が入力の$pristine properyは、そのngModelControllers $setViewValue()方法が使用される場合、それは入力要素上のユーザ対話を介して、またはその方法自分自身を呼び出すことである変化します。

これは、フォームを変更した（変更したng-modelの入力要素を変更した）状態を追跡するために、元の状態が使用されるためです。入力の値がモデルの値と等しいことを意味するものではなく、常にキーストロークごとに更新されます。 フォームを初期状態にリセットする自動方法はありません。いつ行うかは、form.$setPristine()を呼び出して決定しなければなりません。

あなたの例では、自然のままの情報をリセットしたい場合は、スコープ上の機能にボタンを結合することによって自分自身をリセットするためのフォームを伝える必要があります：あなたは別のを持っているしたい場合は

$scope.toggleBool = function() { 
    $scope.myBool = !$scope.myBool; 
    $scope.myForm.$setPristine(); 
} 

フォームの値とオブジェクトの元の状態の値のセットを取得するには、オブジェクトをクローンしてからフォームのクローンを使用する必要があります。そうしないと、すべての変更が常に元のオブジェクトをただちに変更します。

元のオブジェクトとそのクローンを詳細に比較することで、フォームの状態を判断できます。

UPDATE月'15：この答えは2013年からngModelControllerは、フォームの状態を管理するためのいくつかのメカニズムを提供しています角度（現在は1.4）、最近のバージョンでsignificantly richer APIを得ています。