angularjsの形の外でモデルデータが変更されたときに、ウォッチャー内でフォームの妥当性を正しく確認する方法は？

Question

私はまだangularjsにとって非常に新しい、私は$範囲でタイミングを理解するのに問題があると思います。コントローラでは、さまざまなフォーム要素にバインドされているモデルデータのためのウォッチャーを設定しました。フォームが無効である場合を除き、データが変更されたときにウォッチャーはAjax要求を発射します。私はMyFormでフォームの有効性をチェックしています。$有効です。ただし、モデルデータがコントローラ内で更新されていない場合を除き、これはすべてかなり簡単です。検証は予想通りに実行されますが、フォーム。$ VALIDはまだ前の値を持っていますが、更新されたデータを使用する必要があるものではありません。たとえば、フォームが以前に有効であった場合は、必要な入力にバインドされたモデル値を削除します。モデルデータが変更されたため、モデルデータが変更されたため、ウォッチャーは起動します。$有効なITの値はまだ本当です。それは誤っているべきです

だから私の質問はAです。なぜこれが起こっているのですか？、しかし、もっと重要なことは私が達成しようとしているものを処理する正しい方法は何ですか？カスタム指令は意味がありますか？

これは簡略化された例です。

HTML：

<div ng-controller="MyCtrl">
    <form name="myForm">
        <input type="text" name="myField" ng-model="myData" required>
        <button type="button" ng-click="myData=''">Delete</button>
    </form>

    <div>
        The watcher says the form is: <strong>{{ formStatus }}</strong>    
    </div>
</div>

.

コントローラ：

myApp.controller('MyCtrl', ['$scope', function($scope) {
    $scope.myData = 'abc';
    $scope.formStatus = '';

    $scope.$watch('myData', function(newVal, oldVal) {
        if (newVal != oldVal) {
            console.log("my data changed");
            console.log("my form valid = ", $scope.myForm.$valid);        
            $scope.formStatus = $scope.myForm.$valid ? 'Valid' : 'Invalid';
        }
    });
}]);

.

フィドル： http://jsfiddle.net/anpsince83/ck6cc/1/ < / P>

Answer 1

カスタムディレクティブは行く正しい方法です。それは一般的に監視される一握りの理由で指令対コントローラに入れることをお勧めします。高レベルでは、角度を推奨することを推奨し、ビューとサービスの間の接着剤としてのみ動作することを推奨します。しかし、あなたは特定の興味深い理由を打ちます。

角度指令が連動される前に動作する。したがって、角度のngModelWatch()がmyDataの場合、コントローラの時計は時計リストに追加されます。 ngModelWatch()は、Angular Runs $formatters （他のものの中で、その$formattersを思い出してください。変更がモデルに発生したときに検証がトリガーされるところです。

時計リストが監視リストに追加された順序で実行されるため、 Controller $watchは検証前に実行されます。

代わりに、$formattersが監視リストに追加された後、リンク中にリンク中に追加されます。したがって、検証後にディレクティブの$watchが実行されます。

これは更新されたfiddle ここで、ngModelWatch()と各$watchの実行順を見ることができます。 Pirectiveバージョンが$formattersの後に実行されているように機能するのを見るでしょう。