Angular $ watch無效

Question

我在我的控制器上使用了兩個$watches ，它們應該關注這兩個對象：

$scope.gastos = {
    name: "Gastos mensuales",
    data: [0,0,0,0,0,0,0,0,0,0,0,0],
    labels: ["Enero", "Febrero", "Marzo", "Abril", "Mayo",
                "Junio", "Julio", "Agosto", "Septiembre", "Octubre",
                "Noviembre", "Diciembre"]
};

$scope.ganancias = {
    name: "Ganancias mensuales",
    data: [0,0,0,0,0,0,0,0,0,0,0,0],
    labels: ["Enero", "Febrero", "Marzo", "Abril", "Mayo",
                "Junio", "Julio", "Agosto", "Septiembre", "Octubre",
                "Noviembre", "Diciembre"]
};

兩個圖表（來自Charts.js和angular-charts插件）從中讀取數據。 我將圖表放在從屬性接收數據的自定義指令中，並且它們正常工作。

問題是，我想創建另一個圖表來讀取與這些對象相同的另一個對象，但是在此方法中計算它的數據：

function calcularBeneficios(){
 var data = [];
 for(var i=0;i<12;i++){
    data[i] = $scope.ganancias.data[i] - $scope.gastos.data[i];
 }
    console.log("FUNCTION DATA: "+data);
 return data;
}

這些是手表（我試過看object和object.data變量）：

$scope.$watch("gastos", function(){
  $scope.beneficios.data = calcularBeneficios();
  console.log("SCOPE: "+$scope.beneficios.data);
});

$scope.$watch("ganancias", function(){
  $scope.beneficios.data = calcularBeneficios();
  console.log("SCOPE: "+$scope.beneficios.data);
});

這不起作用。 你看到所有的console.logs ？ 我只看到"SCOPE" console.log ，一次（對於ganancias甚至不是兩次）。 當我更改綁定到這兩個對象的某些輸入中的數據時，一切正常（圖表得到實時更新）但beneficios圖表沒有，這些手表也不起作用。

我在這兩塊手表上做錯了嗎？

Answer 1

問題是你正在觀看頂級gastos和ganancias對象。 這有兩個潛在的問題：

1. 正如$ watch的文檔所說，默認情況下，正常的JavaScript不等式用於確定對象是否已更改（ x !== y ）。 由於對象本身就是同一個對象，你只是改變其內的數據，這將永遠是真實的，所以$watch不被解雇。

2. 你可以通過將objectEquality標志設置為true（ $scope.$watch('x', function(){}, true) ）來解決問題。 然后進行深入比較，並且應該在data數組中找到差異。 然而，這是更加性能密集的。

由於您只是在每個對象中使用data數組，因此您只需在$scope.$watchCollection上使用$scope.$watchCollection gastos.data 。 這更清潔，更快捷。

這是一個工作片段，展示了這一點：

 angular.module("myApp", []).controller('myCtrl', function($scope) { // same code function calcularBeneficios() { var data = []; for (var i = 0; i < 12; i++) { data[i] = $scope.ganancias.data[i] - $scope.gastos.data[i]; } console.log("FUNCTION DATA: " + data); return data; } $scope.beneficios = { name: "Beneficios mensuales", data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], labels: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre" ] }; $scope.gastos = { name: "Gastos mensuales", data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], labels: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre" ] }; $scope.ganancias = { name: "Ganancias mensuales", data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], labels: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre" ] }; // watch the array collection in gastos.data $scope.$watchCollection("gastos.data", function() { $scope.beneficios.data = calcularBeneficios(); console.log("SCOPE: " + $scope.beneficios.data); }); // watch the array collection in ganancias.data $scope.$watchCollection("ganancias.data", function() { $scope.beneficios.data = calcularBeneficios(); console.log("SCOPE: " + $scope.beneficios.data); }); // testing functions $scope.changeGastos = function() { $scope.gastos.data[4] = 10; } $scope.changeGanancias = function() { $scope.ganancias.data[0] = 40; } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <h3>beneficios.data</h3> <ul> <li ng-repeat="i in beneficios.data track by $index">{{i}}</li> </ul> <button ng-click="changeGastos()">Change Gastos</button> <button ng-click="changeGanancias()">Change Ganancias</button> </div> 

Answer 2

使用$ watchCollection而不是$watch來監視集合。

或者你也可以這樣看：

$scope.$watch("gastos + ganancias", function(){
  $scope.beneficios.data = calcularBeneficios();
  console.log("SCOPE: "+$scope.beneficios.data);
});