フォーム内のすべてのビューモデルの変更を監視する

Question

AngularJS 1.6でフォーム（または付随するモデル）の値を変更するときは、いつでも関数を実行したいと思います。私は$scope.$watchを含むいくつか試しましたが、この方法は1.6で利用できないようです。

各フォーム要素にng-change属性を追加する以外に、何ができますか？これをフォームに入れようとしましたが、AngularJSはng-modelがないと不平を言います。

Answer 1

あなたのngモデルでオブジェクト表記を使用しようとすると、次のコードとplunkerリンクを参照してください。それはあなたを助けるかもしれません。あなたのhtmlで

：あなたのコントローラで

<form name="details"> 
    <div> 
     <input type="text" ng-model="formDetails.firstName" /> 
    </div> 
    <div> 
     <input type="text" ng-model="formDetails.secondName" /> 
    </div> 
    <div> 
     <button ng-click="fnSubmit()">Submit</button> 
    </div> 
    </form> 

：

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.formDetails={} 
    $scope.fnSubmit=function(){ 
    console.log($scope.formDetails); 
    } 
}); 

今までそれが正常に動作しますバージョンであるかもしれないもの。フォームの入力フィールドごとにng-changeを使用することは避けられます。

私は、このためのカスタムディレクティブを作成すると考えることができplunkerリンク

Answer 2

見つけてください：

：次に、あなたのフォームまたはこのような他のHTML要素にこれを使用することができ

yourModule.directive("formChanged", function ($parse) { 
return { 
    restrict: 'A', 
    link: function (scope, element, attrs) { 

     var handler = $parse(attrs.formChanged); 

     element.find('[ng-model]').each(function() { 
      $(this).on('change', function() { 
       handler(scope)(); 
      }); 
     }); 
    } 
    } 
}); 

を

<form form-changed="yourChangeCallback"> 
    <input type="text" ng-model="model.example"/> 
</form> 

この指示文は、ngModelディレクティブを持つすべての要素に実際にonchangeイベントを設定するだけです。

Answer 3

フォームのいくつかのイベントをリッスンディレクティブを作成することができます。

.directive("formOnChange", function($parse){ 
    return { 
     require: "form", 
     link: function(scope, element, attrs){ 
      var cb = $parse(attrs.formOnChange); 
      element.on("change keyup", function(){ 
       cb(scope); 
      }); 
     } 
    } 
}); 

と使用方法：

<form name="myForm" 
     form-on-change="doSomething()"> 

Answer 4

ひとつのアイデアは、サービスへの変更を報告するng-modelディレクティブを作成することです。

app.directive("ngModel", function(changeService) { 
    return { 
     require: "ngModel", 
     link: function(scope, elem, attrs, ngModel) { 
      ngModel.$viewChangeListeners.push(
       function() { 
        changeService.report(ngModel.$viewValue, elem, attrs); 
       } 
      ); 
     }) 
    }; 
}); 

上記の例では、サービスへの変更を報告各ngModelControllerから$viewChangeListenerを加算します。 $viewChangeListeners配列は、ng-changeディレクティブが使用するのと同じフックです。サービスの

例：

app.service("changeService", function() { 
    this.report = function(value, elem, attrs) { 
     var name = attrs.name || attrs.ngModel; 
     console.log(name + " changed to " + value); 
    }; 
}); 

DEMO in PLNKR.