角 n- 如果或 n- 显示响应慢(2秒延迟?)

当请求繁忙时，我试图显示或隐藏按钮上的加载指示器。我通过在加载请求或完成加载时更改 $scope.load 变量来实现这一点。

 $scope.login = function(){
$scope.loading = true;
apiFactory.getToken()
.success(function(data){
            

})
.error(function(error){
            

})
.finally(function(){
$timeout(function() {
$scope.loading = false;
}, 0);
});
};

在前面:

<button ng-disabled="loading" class="button button-outline button-positive" type="submit">
Log in
<span ng-if="loading" class="ion-refreshing"></span>
</button>

这种方法工作得很好，但是加载图标(离子刷新)只显示大约2秒钟，而 $scope 变量则会立即更新。我试过 $scope。$application，但这里似乎没有什么问题，作用域在请求之后立即更新了。只是图标反应不够快。

42634 次浏览
小开

I had the same issue, and worked-around it by using ng-class with the 'hidden' class name to hide the element instead of using ng-if or ng-show/ng-hide.

小开

Try removing ngAnimate if you're not using it from your app config and index.html page:

angular.module('myApp', [...'ngAnimate',...])

@Spock; if you still require the use of ngAnimate then leave your app config untouched and just add the following CSS:

.ng-hide.ng-hide-animate{
display: none !important;
}

That will hide the animated icon straight after your condition is met.

As you can see we are setting .ng-hide-animate to hidden. This is what causes the delay as it waits for the animation to complete. You can add an animation to your hide event as the class name implies instead of hiding it as in the example above.

小开

I found some solutions here, but the best for me was overriding the styling for the .ng-animate class:

.ng-animate.no-animate {
transition: 0s none;
-webkit-transition: 0s none;
animation: 0s none;
-webkit-animation: 0s none;
}

In html:

<button ng-disabled="loading" class="button button-outline button-positive" type="submit">
Log in
<span ng-if="loading" class="ion-refreshing no-animate"></span>
</button>

This is an example: http://jsfiddle.net/9krLr/27/

I hope help you.

小开

I was facing a similar issue, I used $scope.$evalAsync() to force update the binding.

It works like a charm.

Avoid using $scope.$apply as it can conflict with an already-running $digest phase.

if(selectedStatistics.length === 0 || selectedWorkgroups.length === 0){
ctrl.isSaveDisabled = true;
$scope.$evalAsync();
} else{
ctrl.isSaveDisabled = false;
$scope.$evalAsync();
}
小开

in angular version 1.5.x adding $scope.$apply() after the change in the condition done the job for me here is an example function 

$scope.addSample = function(PDF)
{
var validTypes ="application/pdf";
if(PDF.type == validTypes)
{
//checking if the type is Pdf and only pdf
$scope.samplePDF= PDF.files[0];
$scope.validError = false;
$scope.$apply();
}


else
{
$scope.validError = true;
$scope.samplePDF= null;
$scope.$apply();
}




}
小开

I had the same issue when using

<div *ngIf='shouldShow'>
<!-- Rest of DIV content here -->
</div>

In my case I solved it by adding a class:

.hidden {
display: none;
}

and then adding the class conditionally instead of using *ngIf:

<div [ngClass]="{'hidden': !shouldShow}">
<!-- Rest of DIV content here -->
</div>

If always using it this way, I would consider renaming shouldShow to shouldHide (and negate the logic that assigns it), so it can be used as shouldHide instead of !shouldShow.

If you have display: flex in your CSS for the DIV's existing class, that display property might take precedence over the display: hidden. An easy fix can be to use display: none !important instead, but there are often better solutions to ensure precedence in other ways. Here is a good read about alternatives.

小开

I ended up using Ruben's solution but because I can't afford to add an extra class to all existing cases, I listed the directives I am always using without animations, expecting immediate rendering:

*[ng-hide],
*[ng-show],
*[ng-if],
*[ng-switch-when],
*[ng-switch-default] {
transition: 0s none;
-webkit-transition: 0s none;
animation: 0s none;
-webkit-animation: 0s none;
}

提交答案