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

Posted 2023-02-19

【中文标题】角度 ng-if 或 ng-show 响应缓慢（2 秒延迟？）

【英文标题】：angular ng-if or ng-show responds slow (2second delay?)

【发布时间】：2015-01-12 07:38:35

【问题描述】：

当请求繁忙时，我试图在按钮上显示或隐藏加载指示器。我通过在加载请求或完成加载时更改 $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 但这似乎不是问题所在，范围更新得很好，并且在请求之后立即更新。只是图标响应不够快。

【问题讨论】：

任何动画？

否定。不涉及动画。改用 ng-class 似乎有帮助。

我遇到了相同或类似的问题。范围会立即正确更新——我通过记录来自$scope 函数的消息来验证这一点，ng-if 使用这些函数来确定是否应显示相关元素。但是，带有ng-if 的按钮会在几秒钟内保持不正确的可见或隐藏状态。然后过了一会儿，所有按钮都进入预期的可见/隐藏状态。 — 我改用ng-hide 来解决这个问题。 Angular 版本 1.2.16。

对于那些不使用任何动画的人有什么解决办法吗？

【参考方案1】：

如果您没有在应用配置和 index.html 页面中使用 ngAnimate，请尝试删除它：

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

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

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

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

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

【讨论】：

我有一个简单的页面，只有几个ng-if、ng-show，这显然很慢。我删除了ngAnimate，它为我解决了这个问题。谢谢！

这也解决了我遇到的一个问题...你知道为什么 ngAnimate 的存在会导致过渡缓慢吗？

有同样的问题 - 删除 ngAnimate 解决了它.. 但这不好.. 许多模块需要 ngAnimate 来做很酷的动画.. 怎么办？ ngAnimattias 你在哪里？ :)

在 ng-if 的情况下，只需将 .ng-leave display:none; 添加到元素中就可以了（不需要!important）。

【参考方案2】：

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

【讨论】：

似乎与动画和/或事件处理程序有关。不太清楚为什么其他人很慢，但我想知道

你怎么能这样做？

这速度快多了！这是为什么呢？？

我认为这仅仅是因为使用 ngAnimate 将进入/退出动画行为应用于使用 ng-if/ng-show 的元素，而对于 ng-class 的更改却没有这样做表达式。

@neimad 这是怎么做到的？在我的例子中，我需要使用 ng-if 来测试一个属性值是否为null（等待 api 调用几秒钟），所以两个选择元素会短暂显示。所以你根本不使用ng-if 吗？谢谢。

【参考方案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/

希望对你有帮助。

【参考方案4】：

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

它就像一个魅力。

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

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

【讨论】：

为我工作。但它有什么缺点吗？

我没遇到过。在异步操作的情况下它非常方便。

感谢您的帮助：）

顺便说一下，这个延迟问题主要发生在本地主机环境中，很少发生在生产环境中 - 不知道为什么

【参考方案5】：

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

<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 而不是!shouldShow。

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

【参考方案6】：

在 Angular 版本 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();
            


        

【参考方案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;