如何在使用服務提交Angular表單後更新列表？

Question

我是Angular的新手，我正在嘗試設置基本的「提交評論」&「顯示評論列表」頁面。我希望在提交評論後更新評論列表。目前我可以提交，但必須手動刷新頁面才能看到它。

控制器：

app.controller('FormController', function($scope, CommentService) { 
    $scope.comment = {}; //will be populated by basic form 
    $scope.submit = function() { 
     return CommentService.post($scope.comment).then(function(){ 
      $scope.comment = ""; //blanks out form on POST 
     }); 
    } 
}); 

app.controller('CommentsController' function($scope, CommentService) { 
    CommentService.list().then(function(comments){ 
     $scope.comments = comments.data; 
    }); 
}); 

服務：

app.service('CommentService', function($http) { 
    this.post = function(comment) { 
     return $http.post('/api/v1/comments/', comment); 
    }; 

    this.list = function() { 
     return $http.get('/api/v1/comments/'). 
      success(function(data) { 
       return data; 
      }); 
    }; 

    //How do I connect the two controllers? 
}); 

HTML表單/列表是超級通用的，我只是用 「NG重複」 來顯示評論。我在正確的軌道上嗎？有沒有簡單的我可以這樣做，當通過表單提交評論時，評論列表將被更新？

在此先感謝！

Answer 1

沿着這些線可能會做到這一點，只需編輯語義以匹配您的程序。

在你的控制器：

var getList = function() { 
    $scope.comments = CommentService.list(); 
}; 

CommentService.registerObserverCallback(getList); 

而在你的服務：

var observerCallbacks = []; 

// register the observer's callback in our callback list. 
this.registerObserverCallback = function(callback){ 
    observerCallbacks.push(callback); 
}; 

// function to notify our observers and call the callback they registered with 
var notifyObservers = function(){ 
    angular.forEach(observerCallbacks, function(callback){ 
    callback(); 
}); 
}; 

this.post = function(comment) { 

    return $http.post('/api/v1/comments/', comment).success(function(data, status, headers, config) { 
     notifyObservers(); 
    }) 
}; 

所以基本上你的人告訴你的服務，「哎，我在觀察你。如果你做任何事情，調用此回調函數「，並將其傳遞給getList。服務註冊觀察者，並在post()返回成功後調用回調。