Question

我正在尝试在请求繁忙时显示或隐藏按钮上的加载指示符。我通过在加载请求或加载请求时更改$ scope.loading变量来使用angular。

 $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。$ apply但这似乎不是什么错误，范围在请求后立即更新。这只是图标没有足够快速响应。

感谢您帮助我理解这一点！

Answer 1

如果您未在app config和index.html页面中使用 ngAnimate ，请尝试删除>

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

@Spock;如果您仍然需要使用ngAnimate，那么请保持您的app配置不变，只需添加以下CSS：

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

这将在您的条件满足后直接隐藏动画图标。

正如您所看到的，我们正在设置.ng-hide-animate隐藏。这是等待动画完成时导致延迟的原因。您可以像隐藏类名一样向hide事件添加动画，而不是像上面的示例中那样隐藏它。

Answer 2

我有同样的问题，并通过使用带有'隐藏'类名的ng-class隐藏元素而不是使用ng-if或ng-show / ng-hide来解决它。

Answer 3

我找到了一些解决方案here，但对我来说最好的是覆盖.ng-animate类的样式：

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

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

这是一个例子：http://jsfiddle.net/9krLr/27/

我希望能帮助你。

Answer 4

我遇到了类似的问题，我使用$scope.$evalAsync()来强制更新绑定。

它就像一个魅力。

避免使用$scope.$apply因为它可能与已经运行的$ digest阶段发生冲突。

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

Answer 5

在角度版本1.5.x中添加$scope.$apply()条件更改完成后我的工作就是一个示例函数

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


        }

Answer 6

使用时我遇到了同样的问题

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

就我而言，我通过添加一个类来解决它：

.hidden {
  display: none;
}

，然后有条件地添加类，而不是使用*ngIf：

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

如果始终以这种方式使用它，我会考虑将shouldShow重命名为shouldHide（并取消分配它的逻辑），因此可以将其用作shouldHide而不是{{ 1}}。

如果CSS中有DIV现有类的!shouldShow，则display属性可能优先于display: flex。一个简单的解决方法是改为使用display: hidden，但是通常会有更好的解决方案以其他方式确保优先级。 Here is a good read about alternatives。

Answer 7

我最终使用了 Ruben's solution，但因为我无法为所有现有案例添加额外的类，所以我列出了我一直使用的指令，但没有动画，希望立即呈现：

*[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;
}

角度ng-if或ng-show响应慢（2秒延迟？）

7 个答案: