AngularJS : 如何监视一个服务对象

Question

我已经尝试过使用不同的例子来实现手表功能，但我无法让它发挥作用。我正在观看一个包含对象数组的服务，每个对象都包含一个数组数组。我需要观察数组的变化。

JSON

 [{
    "name": "Chantal Hamlet - Green Castle Homes",
    "subId": "10223",
    "bldId": "13551",
    "data": [
        [179900, 1386],
        [214900, 1440],
        [194500, 1496],
        [217900, 1504],
        [189900, 1542],
        [184900, 1546],
        [192500, 1570],
        [189900, 1576],
        [191900, 1598],
        [204900, 1626],
        [219900, 1651],
        [212900, 1704],
        [214900, 1787],
        [219900, 1837],
        [224900, 1857]
    ]
 }, {
     "name": "Ella Sea Condos - Sahnow Construction",
     "subId": "9761",
     "bldId": "27380",
     "data": [
         [199900, 1500]
     ]
 }]

手表功能

$scope.$watchCollection(function () {
    return chartService.series
},
function (rawData) {
    $scope.seriesData = rawData;
});

服务

chart.factory('chartService', function () {
return {
    getSeries: function () {
       return this.series;
    },
    setSeries: function (series) {
        this.series = series;
    },

Answer 1

问题是您的 setSeries 函数正在更改正在监视的对象。

想像一下

chartService.series = 对象A

观察对象A

chartService.series = 对象 B

ObjectA 没有改变。

要解决此问题，您需要将其包装在一个不变的更大对象中。

angular.module('chartModule', [])
.controller("chartController", ['$scope', 'chartService',
  function($scope, chartService) {
    $scope.seriesData = chartService.seriesContainer;


    $scope.changeData = function() {
      chartService.seriesContainer.series = [{
        "name": "New Name",
      }];
    }
  }
]).factory('chartService', function() {
  return {
    getSeries: function() {
      return this.series;
    },
    setSeries: function(series) {
      this.series = series;
    },
    seriesContainer: {
      series: [{
        "name": "Chantal Hamlet - Green Castle Homes",
      }]
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="chartModule">
  <div ng-controller="chartController">
    {{seriesData.series[0].name}}
    <button ng-click="changeData()">Change Data</button>
  </div>
</body>

如果您使用包装器，您实际上甚至不需要手表，它会自动发生

AngularJS : 如何监视一个服务对象

AngularJS : How to watch a service object

javascript

arrays

kendo-ui

angularjs