我尝试使用Google App Engine(云端点)和AngularJs来实现简单的crud。
我开发了我的后端,一切运作良好。我的问题是Angular。
我将服务称为保存或删除后,我的列表不会刷新。
我的代码控制器:
app.controller('admEstadoController',['$scope','admEstadoService', function ($scope, admEstadoService) {
$scope.saveEstado = function() {
admEstadoService.saveEstado($scope);
}
$scope.deleteEstado = function(id) {
admEstadoService.deleteEstado(id,$scope);
}
$scope.listEstado = function() {
admEstadoService.listEstado($scope);
}
}]);
这是我的服务:
app.factory('admEstadoService',[function() {
var admEstadoService = {};
admEstadoService.listEstado = function($scope) {
gapi.client.enadepopapi.listEstado().execute(function(resp) {
$scope.estados = resp.items;
$scope.$apply();
});
}
admEstadoService.saveEstado = function($scope) {
estado = {
"estado" : $scope.estado,
"nome" : $scope.nome
};
gapi.client.enadepopapi.saveEstado(estado).execute();
}
admEstadoService.deleteEstado = function(id,$scope) {
estado = {
"estado" : id
};
gapi.client.enadepopapi.deleteEstado(estado).execute();
}
return admEstadoService;
}]);
我的观点是:
<div class="panel panel-default" ng-show="is_backend_ready">
<div class="panel-heading">Manutenção de Estados</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form role="form">
<div class="form-group">
<label for="txtEstado">Estado</label>
<input type="text" class="form-control" id="txtEstado" placeholder="" ng-model="estado">
</div>
<div class="form-group">
<label for="txtNome">Nome</label>
<input type="text" class="form-control" id="txtNome" placeholder="" ng-model="nome">
</div>
<button type="submit" ng-click="saveEstado()" class="btn btn-default">Gravar</button>
</form>
<div class="bs-example-bg-classes" style="margin-top:10px;">
<p class="bg-success"> Registro Gravado com sucesso!</p>
</div>
<div class="clearfix"></div>
<div ng-init="listEstado()">
<table class="table table-hover">
<tbody class="table-hover">
<tr>
<th>Estado</th>
<th>Nome</th>
<th>Operação</th>
</tr>
<tr ng-repeat="estado in estados">
<td>{{estado.estado}}</td>
<td>{{estado.nome}}</td>
<td><button type="button" ng-click="deleteEstado(estado.estado)" class="btn btn-default">Excluir</button>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
答案 0 :(得分:1)
即使你更新了后端的数据,AngularJS也没有意识到这一点。保存或删除后,您需要致电listEstado()
。
但是,如果您使用ndb作为数据存储区,请注意由于ndb的最终一致性行为,您的更新数据可能无法立即使用。