使用Django Rest框架发布后的角度刷新列表

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

$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>

$http.get（'job/'）。
成功（函数（数据、状态、标题、配置）{
$scope.jobs=数据；
}).
错误（函数（数据、状态、标题、配置）{
console.log（'错误'，状态）；
});
$scope.save=功能（作业）{
$http.post（'job/'，job）
.成功（功能（数据）{
$scope.jobs.push（data）；//这里我尝试更新视图中的列表
}).
错误（函数（数据、状态、标题、配置）{
console.log（'错误'，状态）；
});
};
//HTML列表
{%verbatim%}
{{job.name}
{{job.description}}
{%endverbatim%}
编辑
删除
//HTML表单
创建新作业
添加作业

---

谢谢

这是有效的解决方案（无需沟通）。我认为您的代码很好，因为它在这里工作，但我认为您错过了tr和td周围的表标记

{{job.name}
{{job.description}}
编辑
删除

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

使用Observer解决

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!');
        });
    };
});

---

1） 你能粘贴html部分吗？2） 你确定收到服务器的响应吗？我添加了html部分。post正在工作，数据将插入数据库并刷新浏览器我的项目已列出。谢谢这是检索/更改角度范围之外的数据时出现的问题。有两种解决方案，第一种是手动获取angular以运行类似这样的摘要——如果（！$scope.$$phase）{$scope.$apply（）；}，或者更好的解决方案是为$http.post（）功能使用服务，angular将处理更新模型。感谢回复！我创建了一个工厂来做这件事，我贴在下面。谢谢回复！我有html中的tab表，问题仍然存在。我尝试了这个选项：我的代码：错误是：错误：JobService.addJob（…）未定义我继续错误：JobService.addJob（…）未定义你知道吗？谢谢

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!');
        });
    };
});