使用 Django-Rest-Framework 发布后的角度刷新列表

Question

我一直在论坛上寻找如何在发布后使​​用服务器更新项目列表。可用示例显示了如何在内存中更新列表。 这是我当前的代码：

$http.get('job/').
    success(function(data, status, headers, config) {
        $scope.jobs = data;
    }).
    error(function(data, status, headers, config) {
        console.log('Error', status);
    });

$scope.save = function(job) {
    $http.post('job/', job)
        .success(function(data) {
            $scope.jobs.push(data); // here i trying update the list in view
        }).
         error(function(data, status, headers, config) {
            console.log('Error', status);
        });
};

// HTML List
<tr ng-repeat="job in jobs">
    {% verbatim %}
      <td> {{ job.name }}</td>
      <td>{{ job.description }}</td>
    {% endverbatim %}
      <td><a ng-click="edit(job.id)" class="btn btn-small btn-primary">edit</a></td>
      <td><a ng-click="delete(job.id)" class="btn btn-small btn-danger">delete</a></td>
</tr>

// HTML form
<div class="span6" ng-controller="JobCtrl">
<h5>Create a New Job</h5>
    <form class="form-inline">
        <div class="form-group block-level">
            <input type="text" class="form-control" name="name" ng-model="job.name" placeholder="Name">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" name="description" ng-model="job.description" placeholder="Description">
        </div>
        <div class="form-group">
            <button class="btn btn-default" ng-click="save(job)">Add Job</button>
        </div>
    </form>
</div>

谢谢！

Answer 1

使用观察者解决。

myApp.service('JobService', function($http) {

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.list = function() {
    return $http.get('job/').
        success(function(data) {
            return data;
        });
};

this.add = function(job) {
    return $http.post('job/', job).success(function(data, status, headers, config) {
        notifyObservers();
    });
};


});


myApp.controller('JobCtrl', function ($scope, $http, $location, JobService) {
    var getList = function() {
        JobService.list().then(function(jobs){
            $scope.jobs = jobs.data;
        });
    };

    JobService.registerObserverCallback(getList);
    getList();

    $scope.save = function(job) {
        JobService.add(job).success(function(data) {
            $scope.job = '';
            console.log('success!');
        });
    };
});

Answer 2

这是可行的解决方案（没有 BE 通信）。我认为你的代码很好，因为它在这里工作，但我认为你错过了 tr 和 td 周围的表格标签

http://jsfiddle.net/U3pVM/5031/

      <table>
<tr ng-repeat="job in jobs">
      <td> {{ job.name }}</td>
      <td>{{ job.description }}</td>
      <td><a ng-click="edit(job.id)" class="btn btn-small btn-primary">edit</a></td>
      <td><a ng-click="delete(job.id)" class="btn btn-small btn-danger">delete</a></td>
</tr>
      </table>

您不必执行任何 $scope.$apply，因为您已经在 angular 范围内工作（ng-click 和 $http 后端请求就是这样）