Question

在我的投票应用中，我只是通过调用我的API来更新简单ng-repeat来创建和删除民意调查。当我的所有$http调用都在我的控制器中时，我完全正常工作但是当我尝试使用服务模块化我的代码时，它没有正确更新。

我不完全理解承诺，但我在这里做了一些搜索，看看是否有效，但我没有取得任何进展..

服务

    /* global app */
app.factory("pollsService", ["$http", function($http){

    return {
        get: $http.get('api/polls').success(function(data) {return data;}),


    deletePoll: function(id, cb) {
        $http.delete('/api/polls/' + id)
            .success(function(results) {
                cb(results);
            })
            .error(function(err) {
                throw err;
            });
    },

    createPoll: function(formData, cb) {
        $http.post('/api/polls', formData)
            .success(function(results) {
              cb(results);
            })
            .error(function(err){
                throw err;
            });
    }
    }

}]);

控制器：

/* global app */
app.controller("mainController", ["$scope", "pollsService", function($scope, pollsService){

$scope.formData = {};

pollsService.get
    .success(function(results){
        $scope.polls = results;
})
    .error(function(err){
        alert(err);
})

$scope.removePoll = function(id) {
    pollsService.deletePoll(id, function(results){
        $scope.polls = results;
    })
}   

$scope.createPoll = function() {
    pollsService.createPoll($scope.formData, function(results){
        $scope.polls = results;
        $scope.formData = {};
    })
}

}]);

我的通话仍然有效，但是当我点击新创建的民意调查或删除民意调查时，我必须刷新浏览器以获取更新的数据。

非常感谢任何帮助！

Answer 1

为了ng-repeat使用您的新数据更新现有视图，您需要在数据更新后添加$scope.$apply();。

希望这有帮助。

Answer 2

我建议使用服务结构而不是工厂。另外你为什么不使用$ resource服务？用这种方法可以很容易地解决这个问题：

/* global app */
angular.service("pollsService", function($resource){

    this.get = get;
    this.deletePoll = deletePoll;
    this.createPoll = createPoll;

    function get(){
     return $resource('api/polls', {}).query().$promise;
    }

    function deletePoll(params){
     return $resource.delete('/api/polls/:id', {id: params.id}).remove().$promise;
    }

    function createPoll(formData){
     return $resource.post('/api/polls', {}).save(formData).$promise
    }
})

---- CTRL

app.controller("mainController", ["$scope", "pollsService",    function($scope, pollsService){

  $scope.formData = {};


pollsService.get().then(function(data){
 $scope.polls = results;
}, function(error){

})

$scope.removePoll = function(id) {
   pollsService.deletePoll({id: id}).then(function(results){
    $scope.polls = results;
  }, function(error){
   // error here
  })
}   

$scope.createPoll = function() {
   pollsService.createPoll($scope.formData).then(function(data){
    $scope.polls = results;
    $scope.formData = {};
  }, function(error){

 });
 }

}]);

Angular服务没有正确更新我的控制器中的$ scope.data

2 个答案: