角度：從工廠更新范圍不起作用

Question

我有一家工廠：

simuApp.factory('Incendie', function($http) {

    return {
        // liste des incendies
        incendies : [],

        // fonction pour récupérer la liste des incendies
        getListeIncendies : function() {

            $http.get(site_url+'gestionnaireFeu/listeIncendies').
            success(function(data, status, headers, config) {
                // si liste retournée, on enregistre
                incendies = data;
                return data;
            }).
            error(function(data, status, headers, config) {
                console.log("Un problème est survenu. (service incendie : getListeIncendies).");
            });
        },

        // fonction pour supprimer un incendie donné
        supprimerIncendie : function(IDIncendie) {
            $http.get(site_url+'gestionnaireFeu/supprimerIncendie/'+IDIncendie).
            success(function(data, status, headers, config) {
                // si liste retournée, on enregistre
                this.incendies = data;
            }).
            error(function(data, status, headers, config) {
                console.log("Un problème est survenu. (service incendie : supprimerIncendie).");
            });
        },

        // fonction pour ajouter un incendie
        ajouterIncendie : function(newIDIncendie) {
            $http.get(site_url+'gestionnaireFeu/creerIncendie/'+newIDIncendie).
            success(function(data, status, headers, config) {
                // si liste retournée, on enregistre
                incendies = data;
            }).
            error(function(data, status, headers, config) {
                console.log("Un problème est survenu. (service incendie : ajouterIncendie).");
            });
        }
    }

});

還有一個控制器：

simuApp.controller('incendieController', function($scope, $http, Incendie) {

    // liaison du scope avec le service incendie
    //$scope.incendies         = Incendie.incendies;

    $scope.incendies         = Incendie.getListeIncendies();

    $scope.updateIncendies = function() {
        $scope.incendies = Incendie.getListeIncendies();
    }

    // $scope.getListeIncendies = Incendie.getListeIncendies();
    // $scope.ajouterIncendie   = Incendie.ajouterIncendie();
    // $scope.supprimerIncendie = Incendie.supprimerIncendie();

}); 

我的視圖未更新，但仍然可以執行ajax調用。 （檢查螢火蟲，我有返回的JSON）。

這是我認為的代碼：

<div ng-controller="incendieController">
    TEST
    <div ng-repeat="incendie in incendies">
        incendies : {{ incendie.idFeu }}
    </div>
</div>

我沒有任何錯誤，但是我的視圖僅顯示“ TEST”。

你知道為什么嗎？

謝謝

Answer 1

您的getListeIncendies應該如下所示：

getListeIncendies : function() {
    var scope = this;
    return $http.get(site_url+'gestionnaireFeu/listeIncendies').
    success(function(data, status, headers, config) {
        // si liste retournée, on enregistre
        scope.incendies = data;
        return scope.incendies;
    }).
    error(function(data, status, headers, config) {
        console.log("Un problème est survenu. (service incendie : getListeIncendies).");
    });
},

注意var scope = this; 和scope.incendies = data; 然后在您的控制器中

Incendie.getListeIncendies().then(function(response) {
    $scope.incendies = response;
});

Answer 2

您無法從AJAX調用返回，它是異步的！ 相反， return實際的$http請求並使用.then並在控制器中分配數據

getListeIncendies : function() {
    return $http.get(site_url+'gestionnaireFeu/listeIncendies').then(function(result) {
        // si liste retournée, on enregistre
        return result.data;
    }, function(err) {
        console.log("Un problème est survenu. (service incendie : getListeIncendies).");
    });
},

和您的控制器：

Incendie.getListeIncendies().then(function(data) {
    $scope.incendies = data;
});