Angular JS视图未更新
[英]Angular JS view not updated
问题描述
Here's my setup, I have a backend API running on Tomcat and built in Spring and the frontend in Angular JS, data is passed back and forth via JSON. 
这是我的设置，我有一个在Tomcat上运行并在Spring中构建的后端API，以及在Angular JS中构建的前端API，数据通过JSON来回传递。 All operations on the backend API were tested with the REST console and the Angular app as well. 后端API上的所有操作也已通过REST控制台和Angular应用进行了测试。 The app is a CRUD for Teams which are described by an id, a name and a team rating , for example : 该应用程序是针对团队的CRUD，由ID，名称和团队等级来描述，例如：
[{"id":69,"name":"test","rating":5},{"id":70,"name":"test 2","rating":6}]
I noticed that my views aren't updated after I add a new team or delete a new team even though the POST or DELETE requests executed successfully and the changes are reflected in the database (MySQL). 我注意到，即使成功执行了POST或DELETE请求并且更改已反映在数据库（MySQL）中，添加新团队或删除新团队后，我的视图也不会更新。
I'm not sure if I need to manually invoke $scope.$apply or if I need to implement promises to make the app work. 我不确定是否需要手动调用$ scope。$ apply或是否需要实现使应用程序正常运行的承诺。
app.js app.js
var teamApp = angular.module('teamApp',[
'ngRoute',
'teamControllers',
'teamServices'
]);
teamApp.config(['$httpProvider', function($httpProvider) {
delete $httpProvider.defaults.headers.common["X-Requested-With"];
}]);
teamApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/teams', {
templateUrl: 'views/team-list.html',
controller: 'teamController'
}).
when('/team/:teamId', {
templateUrl: 'views/team-detail.html',
controller: 'teamDetailController'
}).
when('/teams/create', {
templateUrl: 'views/team-create.html',
controller: 'teamCreateController'
}).
otherwise({
redirectTo: '/teams'
});
}]);
controllers.js controllers.js
var teamControllers = angular.module('teamControllers', []);
teamControllers.controller('teamController',
['$scope', 'Teams', 'Teams', '$location',
function($scope, Teams, Team, $location) {
$scope.viewTeam = function(teamId) {
$location.path('/team/'+teamId);
};
$scope.createTeam = function () {
$location.path('/teams/create');
};
$scope.teams = Teams.query();
$scope.teams.$promise.then(function(result){
console.log('Success ' + result);
$scope.teams = result;
});
}]);
teamControllers.controller('teamDetailController',
['$scope', '$routeParams', 'Team', '$location',
function($scope, $routeParams, Team, $location){
$scope.cancel = function() {
$location.path('/teams');
};
$scope.deleteTeam = function(teamId) {
Team.delete({teamId: teamId});
$location.path('/teams');
};
$scope.team = Team.show({teamId: $routeParams.teamId});
}]);
teamControllers.controller('teamCreateController',
['$scope', 'Teams', '$location',
function($scope, Teams, $location){
$scope.createTeam = function() {
Teams.create($scope.team);
$location.path('/teams');
}
$scope.cancel = function() {
$location.path('/teams');
};
}]);
services.js services.js
var teamServices = angular.module('teamServices', ['ngResource']);
teamServices.factory('Teams', ['$resource',
function($resource){
return $resource('http://localhost:8080/api/teams', {}, {
query: {method:'GET', isArray:true},
create: {method:'POST'}
});
}]);
teamServices.factory('Team', ['$resource',
function($resource){
return $resource('http://localhost:8080/api/team/:teamId', {}, {
show : {
method:'GET'
},
delete : {
method:'DELETE'
}
});
}]);
index.html 的index.html
<html lang="en" ng-app="teamApp">
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<style>
body {
padding-top: 60px;
}
@media (max-width: 980px) {
body {
padding-top: 0;
}
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-resource.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
Solution 解
In the controllers.js I've changed the createTeam and deleteTeam calls and used promises, for example: 在controllers.js中，我更改了createTeam和deleteTeam调用并使用了promise，例如：
Before: 之前：
$scope.createTeam = function() {
Teams.create($scope.team);
$location.path('/teams');
}
After: 后：
$scope.createTeam = function() {
Teams.create($scope.team).$promise.then(
function(result){
console.log('Success' + result);
$location.path('/teams');
},
function(error){
alert(error);
console.log(error);
}
);
}
1 个解决方案
解决方案1
3 已采纳 2014-04-05 11:12:17
Now I read a bit more carefully, hope I'm not wrong, see this about promises . 现在，我更加仔细地阅读，希望我没看错，请参阅有关promise的内容 。 I think that you are not waiting for the DELETE or POST request to complete, and you are going on the teams page where you make a GET query to list all the teams, You should redirect on the teams page on the success return of the POST/DELETE or you should chain your request so the GET runs AFTER the POST/DELETE, because, ATM, it appears that you are trying to make the second CALL before the first one is DONE. 我认为您不是在等待DELETE或POST请求完成，而是要进入“ teams页面，在该页面上进行GET查询以列出所有团队，您应该在POST成功返回时在“团队”页面上重定向/ DELETE或您应该链接您的请求，以便GET在POST / DELETE之后运行，因为ATM似乎正在尝试在第一个CALL完成之前进行第二个CALL。
You have a promise on the TEAMS QUERY, but you don't have one on the POST/DELETE, as far as I can tell. 据我所知，您在TEAMS QUERY上有一个承诺，但在POST / DELETE上没有一个承诺。
I might be wrong though, check this out nonetheless. 我可能是错的，不过请检查一下。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.