javascript - Angular : Update scope from factory not working

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).");
            });
        }
    }

});

还有一个 Controller :

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();

}); 

我的 View 没有更新，但 ajax 调用还是可以的。 (用firebug检查，我返回了json)。

这是我的观点的代码:

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

我没有任何错误，但我的 View 仅显示“TEST”。

你知道为什么吗？

谢谢

Answer 1

您无法从 AJAX 调用返回，它是异步的!相反，返回实际的$http请求并使用.then并在 Controller 中分配您的数据

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).");
    });
},

还有你的 Controller :

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