Question

我希望在http请求后立即显示新数据而不重新加载整个页面。我发现我可以使用angularjs中的$apply来实现此目的。但我被困了。数据没有立即显示。

这是控制器中的代码。

$scope.reload = function(data){
            $timeout(function () {
                $scope.$apply(function () {
                    console.log(data);
                    $scope.data = data;
                });
            });
        };
// This part is not working
$scope.addMilestone = function (){

            $http({
                url: httpUrl + 'api/milestone/add',
                method: 'post',
                data: $.param($scope.formData),
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            })
            .then(function (result) {

                $scope.data = result.data;

                $scope.reload($scope.data);

            });
        };
// This part is working
$scope.deleteMilestone = function(id){
            $http.get(httpUrl + 'api/milestone/delete?id=' + rowid).then(function(result){

                if (result.data === 'OK'){                        
                    $http.get(httpUrl + 'api/carts/content').then(function (returns) {
                        $scope.data = returns.data;
                        $scope.reload($scope.data);
                    });

                }
            });
        };

令我感到困惑的是，此方法适用于删除数据，但不适用于插入新数据。在$scope.deleteMilestone中，删除的数据会立即从视图中删除。我希望它也适用于$scope.addMilestone

Answer 1

对于您所写的部分，请尝试使用此功能。

$scope.addMilestone = function (){
      $http.post('api/milestone/add', $scope.formData, {'Content-Type': 'application/x-www-form-urlencoded'})
                         .then(function (result) {

                    $scope.data = result.data;

                    $scope.reload($scope.data);

                });};

Answer 2

您的删除工作正常，因为您在get api之后致电delete，但对于add您没有进行该API调用，因此数据不会为您重新加载

将添加里程碑方法更改为

$scope.addMilestone = function (){ $http({ url: httpUrl + 'api/milestone/add', method: 'post', data: $.param($scope.formData), headers: {'Content-Type': 'application/x-www-form-urlencoded'} }) .then(function (result) { if (result){ $http.get(httpUrl + 'api/carts/content').then(function (returns) { $scope.data = returns.data; $scope.reload($scope.data); }); } }); };

$ scope。$ apply在插入数据时不起作用

2 个答案: