Question

我希望在AngularJS 1.6中更改表单（或附带模型）中的值时执行函数。我尝试过一些事情，包括$scope.$watch，但似乎这种方法在1.6中不可用。

除了在每个表单元素上添加ng-change属性之外，我该怎么办？试过把它放在表格上，但是AngularJS抱怨没有ng-model。

Answer 1

请尝试在ng-model中使用对象表示法，请参阅以下代码和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

我可以考虑为此创建一个自定义指令：

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.

观察表单中所有视图模型的更改

4 个答案: