角度-更改工廠數據時更新范圍

Question

我正在使用工廠輪詢特定的Web服務。 此Web服務用於在工廠中更新數據。 我在主控制器中啟動該工廠，然后通過工廠函數填充作用域變量。 該變量正確初始化，並且我在屏幕上獲得了正確的數據，但是我正在努力使數據自動綁定。

編輯其他注釋：該代碼位於Factory中的原因是，我計划跨多個視圖使用Factory數據。

這是我到目前為止的內容：

App.factory('metrics', function($http, $q, $timeout){
    var service;
    var users = [{laps:[]}];
    var updateMetrics = function(){
        //updates the users array in the factory
    };
    service.load = function (){
        var deferred = $q.defer();

        $http.get('http://www.example.com/api/random').success(function(data) {
            var temp_array = data.split("\n");
            updateMetrics(0, temp_array);
            deferred.resolve({status: 'good'});
            $timeout(service.load,3000);
        });
        return deferred.promise;
    };

    service.lastLapInfo = function(){
        var lastlap = [];
        for (var i=0; i<users.length;i++)
        {
            var lap = users[i].laps[users[i].laps.length-1];
            lastlap.push(lap);
        }
        return lastlap;
    };
    return service;
});

App.controller('mainController', function($scope, metrics) {
    metrics.load().then(function(response){
        $scope.$watch(function () { return metrics.lastLapInfo() }, function (newVal, oldVal) {
            if (newVal !=oldVal)
            {
                $scope.users=metrics.lastLapInfo();
            }
        });
    });
});

當我嘗試上述操作時，出現錯誤，提示“達到10次$ digest（）迭代次數”。 我不知道怎么可能，因為我沒有多次調用watch函數。

有任何建議（或其他手段來完成我想做的事情？）

Answer 1

如果您不是100％使用$watch ，我更喜歡的一種模式是將模塊（而不是對它們的引用）的新實例綁定到當前作用域，並將控制器嚴格保留為用於將項目的視圖和模型連接在一起的組件。 這甚至不使用$watch ，即使在模塊之間協調數據也是如此。 我更喜歡在模塊/工廠中使用$rootScope的$broadcast ， $emit和$on方法（在將$rootScope作為服務傳遞后，雖然在所有情況下都可以使用，但不一定適用於所有情況）而不是相對緩慢的$watch或$watchCollection方法。 使用后者會使我感到內臟...但是我離題了。

在您的情況下，可以進行以下類似的工作嗎？

App.factory('metrics', function($http, $q, $timeout){
    var service;
    service.users = [{laps:[]}];
    service.updateMetrics = function(){
        // updates the users array in the current instance of `metrics`
        // ex:
        // this.users = updatedMetrics;
        // don't do:
        // service.users = updatedMetrics;
    };
    service.load = function (){
        var deferred = $q.defer();

        $http.get('http://www.example.com/api/random').success(function(data) {
            var temp_array = data.split("\n");
            this.updateMetrics(0, temp_array);
            deferred.resolve({status: 'good'});
            $timeout(service.load,3000);
        }.bind(this));
        return deferred.promise;
    };

    service.lastLapInfo = function(){
        var lastlap = [];
        for (var i=0; i<this.users.length;i++)
        {
            var lap = this.users[i].laps[this.users[i].laps.length-1];
            lastlap.push(lap);
        }
        return lastlap;
    };
    return service;
});

App.controller('mainController', function($scope, metrics) {
    $scope.metrics = angular.copy(metrics);

    $scope.metrics.load();

});

通過設置$scope.metrics = angular.copy(metrics) ，我們將創建一個新的metrics實例，而不是將$scope.metrics設置$scope.metrics對metrics的引用（ $scope.metrics = metrics ）。 這有幾個好處，包括您現在可以在控制器中使用同一模塊的多個實例（即$scope.foo = angular.copy(foo); $scope.bar = angular.copy(foo);由於綁定了對象$scope是全新的對象，而不是對同一模塊的引用。

另一個好處是，實例metrics連接到$scope可以被用來調用方法metrics可以允許任何更改metrics ，自動適用於您的控制器的看法。 當不使用angular.copy或$.extend嘗試使其正常工作時，我經常會遇到奇怪的問題，這似乎是因為對附加到$scope的引用模塊的更改並非總是被注冊。