如何显示叠加加载gif，同时完成我的http.Post in angular

How show overlay with loading gif while finish my http.post in angular

本文关键字：我的 http angular in Post 何显示 显示 gif 加载 叠加      更新时间：2023-09-26

朋友们，我试着用ng-show(loading)添加div，当初始化我的控制器时，将false设置为loading，当用户点击按钮时:

<button ng-click="AddUser(user)">Yes</button> 

$scope.AddUser = function(user) {
        user.approved = true;
        $scope.loading = true;
        $http.get('/group/' + user.group).success(function(resp) {
            $scope.error = "";
            user.name = resp.name;              
            user.company = resp.company;                
            $http.post('/approvedUser', user).success(function(response) {
                $scope.loading = false;
                $location.path('/admin/listUsers');                 
            }).error(function(response) {
                $scope.error = "There was a problem!";
            });

        }).error(function() {
            $scope.error = "Problem listing Groups";
        });     
};

我需要添加div叠加加载动画，而用户是创建的，这个过程有点慢，因为我调用外部API后，我希望用户不能使用系统来完成这个过程。

谢谢

在你的视图中定义一个潜水，在它里面应该有一个gif图像，像这样:

<div ng-if="status">
  <img src="link of gif image" />
</div>

，然后在第一次加载页面时从控制器初始化状态变量

 $scope.status = 0;

然后，对AddUser函数做一个小的修改:

$scope.status= 0; // initialize loading image parent div
$scope.AddUser = function(user) {
        user.approved = true;
        $scope.loading = true;
        $scope.status= 1; // Show loading image
        $http.get('/group/' + user.group).success(function(resp) {
            $scope.error = "";
            user.name = resp.name;              
            user.company = resp.company;                
            $http.post('/approvedUser', user).success(function(response) {
                $scope.status= 0; // Hide loading image
                $scope.loading = false;
                $location.path('/admin/listUsers');                 
            }).error(function(response) {
              $scope.status= 0; // Hide loading image
                $scope.error = "There was a problem!";
            });

        }).error(function() {
            $scope.status= 0;// Hide loading image
            $scope.error = "Problem listing Groups";
        });     
};
相关文章：