ng-show 和 ng-if 滞后于隐藏内容

Question

我有以下内容可以根据 searchQuery 是否为空来显示和隐藏清除按钮。当用户开始在输入框中输入时，按钮会立即显示。

但是，当用户单击清除按钮或删除所有输入时，在清除按钮被删除之前会有明显的延迟。我也尝试过 ng-show，并收到了相同的结果。任何想法为什么会存在这种滞后？

HTML

<button ng-if="search.cardsQuery.length" class="button-icon" ng-click="clearSearchQuery()">
    <i class="ion-android-close search-cards"></i>
</button>

控制器

$scope.clearSearchQuery = function() {
    $scope.search.cardsQuery = '';
};

Answer 1

检查您正在应用 ng-if/ng-show 的元素上的 css 类。寻找transition effect。如果该类有转换，则可能是导致延迟的原因：

.button-icon {
    transition: all .5s;
}

Answer 2

这是开发人员中常见的问题。即使尝试使用 ng-if 也会导致同样的问题。我可以为您推荐一个简单的解决方案。

打开特定 html 文件的 css 文件并添加以下行。

**.ng-hide { display: none !important }**

希望，它会有所帮助。

Answer 3

$scope.$evalAsync();

为我工作:)