Question

这是我的ajax请求，

我想显示加载微调器。我提到here，但我不清楚。

我只想在$http.post期间显示微调器，并在完成帖子后隐藏。

调用中的angular.element('#mydiv').show()和angular.element('#mydiv').hide()之类的内容。我应该在哪个地方给出以显示帖子中#mydiv正在进行中。

这是我的电话

$scope.doVerify={email:'',password:''};
    $scope.doVerify = function () 
    {
     email = $scope.verify.useremail;
     password = $scope.verify.password;
     $scope.data.show = false; 
     $http.post('VerifyUser', { email: email, password: password}).then(function (results) 
     {
     $scope.data.show = true
     if(results.data=='success')
     {
     $location.path('registration');
     }
     else
     {
     $scope.data.msg = 'Incorrect Password'
     }
     });
    };

我应该将angular.element('#mydiv').show()和angular.element('#mydiv').hide()放在装载程序中？

Answer 1

在你进行$ http调用之前需要先进行

angular.element('#mydiv').show()，并且angular.element('#mydiv').hide()应该成功并且出现错误回调。

angular.element('#mydiv').show(); // show loading spinner
$http.post('VerifyUser', { email: email, password: password}).then(function (results) {
    angular.element('#mydiv').hide(); // hide loading spinner
});

Answer 2

我认为这样做的最佳解决方案是在HTML中添加微调器，如下所示：

<div ng-show="spinnerVisibility" class="spinner></div>

然后在发布帖子之前/之后控制控制器中的spinnerVisibility变量。例如：

$scope.spinnerVisibility = true;
$http.post('VerifyUser', { email: email, password: password}).then(function (results) {
    $scope.spinnerVisibility = false;
});

Answer 3

此处如何在代码中显示微调器。显示或隐藏$ scope.prograssing var设置的img / icon。

$scope.doVerify={email:'',password:''};
        $scope.doVerify = function () 
        {
         email = $scope.verify.useremail;
         password = $scope.verify.password;
         $scope.data.show = false; 

    $scope.sendAjax = function() {
    $scope.prograssing = true; // show spinner here
    $http.post('VerifyUser', { email: email, password: password}).then(function (results) 
             {
             $scope.data.show = true
             if(results.data=='success')
             {
             $location.path('registration');
    $scope.prograssing = false;        // hide spinner when successful
             }
             else
             {
             $scope.data.msg = 'Incorrect Password';
    $scope.prograssing = false;        // hide spinner when unsuccessful
             }
             });
           };
$scope.sendAjax();
       };

Answer 4

angular.element('#mydiv').show()需要进入拦截器的定义。拦截器被推入角度模块的配置块内。完全按照它的方式进行here。

angular.element('#mydiv').hide()需要进入$ http服务的响应（在'then'块内）。

您所指的示例正是按照应有的方式完成的。

Angularjs显示加载微调器

4 个答案: