将ngChange附加到所有输入?

时间:2015-05-20 22:53:09

标签: javascript angularjs

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

我有几个使用一个Controller的视图,我们称之为页面控制器。

在视图中,我有一堆输入/选择/ textarea元素。当它们改变时,我想在控制器范围内执行一个函数。现在,我知道我可以将ng-change属性应用于每个输入,但我们正在谈论......许多输入。

在我前角的日子里,我会做一些像

这样的事情

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

我一直想要得到    $scope.$watch()  工作,但我似乎无法让它工作......以下是我试图实现的一些代码示例。

我觉得自己错过了$watch的工作方式。在我的实际应用程序中,该Device服务是与Web套接字的连接。但是我已经为这个问题简化了它。

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

1 个答案:

答案 0 :(得分:2)

您的问题是由于对象的浅层观察造成的。除非您使用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并绑定到范围内的函数。

实施例: -

        $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