Javascript 查看表单中所有视图模型的更改

在AngularJS 1.6中，每当表单（或伴随模型）中的值发生更改时，我都希望执行一个函数。我已经尝试了一些方法，包括

$scope.$watch

，但这种方法在1.6中似乎不可用

---

除了在每个表单元素上放置

ng change

属性之外，我还能做什么？我也试着把这个放在表单上，但AngularJS抱怨说没有

ng模型

请尝试在您的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>

不管是什么版本，它都能正常工作。我们可以避免对表单中的每个输入字段使用ng更改

---

请查找链接

请尝试在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>

不管是什么版本，它都能正常工作。我们可以避免对表单中的每个输入字段使用ng更改

---

请查找链接

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

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>

---

现在，该指令实际上只是在具有

ngModel

指令的每个元素上设置一个

onchange

事件

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

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>

---

现在，该指令实际上只是在具有

ngModel

指令的每个元素上设置一个

onchange

事件

您可以创建一个侦听以下形式的某些事件的指令：

.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()">

---

您可以创建一个指令来侦听以下形式的某些事件：

.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()">

---

一个想法是创建一个报告服务更改的

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

上面的示例向每个添加了一个报告服务更改的。数组与

ng change

指令使用的钩子相同

服务的示例：

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

---

一个想法是创建一个报告服务更改的

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

上面的示例向每个添加了一个报告服务更改的。数组与

ng change

指令使用的钩子相同

服务的示例：

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

---

非常优雅，但我可以想象，

ng模型并不总是附加到输入字段，例如使用自定义指令/第三方指令。我想你可以直接将
change
事件绑定到表单上，我没有想到这种情况，但实际上我从未使用过第三方添加
ngModel
指令本身。然而，整个解决方案是一种相当静态的方法，需要在评估时所有输入元素都已经存在。指令仍然可以改进。相当优雅，但我可以想象，
ng模型
并不总是附加到输入字段，例如使用自定义指令/第三方指令。我想你可以直接将
change
事件绑定到表单上，我没有想到这种情况，但实际上我从未使用过第三方添加
ngModel
指令本身。然而，整个解决方案是一种相当静态的方法，需要在评估时所有输入元素都已经存在。该指令仍有待改进。