javascript - 将 ngChange 附加到所有输入？

Question

也许我做错了所以请告诉我...

我有多个 View 使用一个 Controller ，我们将其称为页面 Controller 。

在 View 中，我有一堆 input/selects/textarea 元素。当它们改变时，我想在 Controller 范围内执行一个函数。现在，我知道我可以将 ng-change 属性应用于每个输入，但我们正在谈论......许多输入。

在我还没有成为 Angular 的时候，我会做类似的事情

$("#pageOne input").on("change", function(){
parentScopeFunction();
});

我一直在努力获取 $scope.$watch() 可以工作，但我似乎无法让它工作...这是我正在努力实现的一些代码示例。

我觉得我遗漏了一些有关 $watch 工作原理的信息。在我的实际应用程序中，该设备服务是与网络套接字的连接。但是我针对这个问题简化了它。

https://jsfiddle.net/t1pcgkux/5/

Answer 1

您的问题是由于对对象的浅层观察。它不会跟踪对象属性的任何更改，除非您使用监视函数中的第三个参数将其设置为深度监视。仅当两个对象(引用)不同时，Watch 迭代器函数才会运行，这在您的情况下不会发生，因为它只是属性更改。

        $scope.$watch(function () {
            return $scope.Device.stageDevice;
        }, function (n, o) {
            console.log("Device changed", n, o); // This never seems to happen.
        }, true); //<-- here

但是您真的不需要添加监视，而是可以使用 ng-change 并绑定(bind)到作用域上的函数。

例子:-

        $scope.deviceChange = function(){
            console.log("Device changed", $scope.Device.stageDevice);
        }

和

 <input class="form-control" ng-model="Device.stageDevice.name" 
        ng-change="deviceChange()"/>

<textarea class="form-control" ng-model="Device.stageDevice.desc"
          ng-change="deviceChange()"></textarea>

Both examples Demo