Просмотр изменений во всех моделях просмотра в форме

Question

Я хотел бы выполнить функцию в любое время, когда значения в форме (или сопутствующей модели) будут изменены в AngularJS 1.6. Я пробовал несколько вещей, включая $scope.$watch, но, похоже, этот метод недоступен в 1.6.

Помимо размещения атрибута ng-change на каждом элементе формы, что мне делать? Пробовал также накладывать это на форму, но AngularJS жалуется, что нет ng-model.

Answer 1

Просьба использовать объектные обозначения в вашей ng-модели, пожалуйста, обратитесь к следующему коду и ссылке на плункер. Это может вам помочь.

в вашем 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

я мог думать о создании пользовательской директивы для этого:

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)(); 
      }); 
     }); 
    } 
    } 
}); 

Затем вы можете использовать это на форме или любой другой HTML элемент, как это:

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

Теперь директива фактически установит событие onchange для каждого элемента, который имеет директиву ngModel.

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); 
       } 
      ); 
     }) 
    }; 
}); 

Приведенный выше пример добавляет $viewChangeListener к каждому ngModelController, который сообщает об изменениях в службе. Массив $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.