Question

这是我的设置，我有一个在Tomcat上运行的后端API，它是在Spring和Angular JS的前端构建的，数据是通过JSON来回传递的。后端API上的所有操作都使用REST控制台和Angular应用程序进行了测试。该应用程序是团队的CRUD，由id，名称和团队评级描述，例如：

[{"id":69,"name":"test","rating":5},{"id":70,"name":"test 2","rating":6}]

我注意到，即使POST或DELETE请求成功执行并且更改反映在数据库（MySQL）中，添加新团队或删除新团队后我的视图也不会更新。

我不确定是否需要手动调用$ scope。$ apply或者我是否需要实现promises以使应用程序正常工作。

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

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

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

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

解决方案

在controllers.js中，我更改了createTeam和deleteTeam调用并使用了promises，例如：

在：

    $scope.createTeam = function() {
        Teams.create($scope.team);
        $location.path('/teams');
    }

后：

$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);
        }
    );
}

Answer 1

现在我仔细阅读一下，希望我没错，请参阅this about promises。我认为您不是在等待DELETE或POST请求完成，而您正在teams页面上进行GET查询以列出所有团队，您应该重定向团队关于POST / DELETE成功返回的页面，或者您应该链接您的请求，以便在POST / DELETE之后运行GET，因为，ATM，看起来您正试图在第一个CALL完成之前进行第二次CALL。

你在TEAMS QUERY上有一个承诺，但据我所知，你在POST / DELETE上没有一个承诺。

虽然我可能错了，但仍然可以查看。

Angular JS视图未更新

1 个答案: