ng-show指令可以延迟使用 [英] Can ng-show directive be used with a delay

问题描述

我有一个微调框，显示为 ng-show = loading> 0

I have a spinner this is shown with ng-show="loading>0"

一种可以延迟显示该微调器的方式（例如1秒）？

Is there a way I can display this spinner with a delay (say 1 second)?

我不能使用超时，因为在有多个请求的情况下，卸载计数器将不同步。

I can't use a timeout because with multiple requests de loading counter will get out of sync.

我需要的是通过CSS过渡或类似的

What I need is a delay on the ng-show via css transition or similar

推荐答案

这是一种更简单的方法，可以满足我的需求。根据您的操作，将函数 setDelay（）绑定到元素。例如，在我的情况下，我将 setDelay（）绑定到选择的输入。

Here's a simpler approach that worked for my needs. Depending on what your action is, you would tie function setDelay() to the element. For example, in my case I tied setDelay() to a select input.

触发HTML：

<select class="first-option"
    ng-change="setDelay()" 
    ng-options="o.label for o in download.options" 
    ng-model="optionModel" required>
</select>

在您的控制器中，添加一个简单的函数 setDelay 将会更改标志 $ scope.delay ：

In your controller, add a simple function setDelay that will change the flag $scope.delay:

$scope.setDelay = function(){
    $scope.delay = true;
    $timeout(function(){
        $scope.delay = false;
    }, 200);
};

然后，您只需使用 $ scope.delay 作为ng-show中的标志：

Then, you can simply use $scope.delay as a flag in ng-show:

<div class="loading-div" ng-show="delay">
    <img src="loading_spinner.gif">
</div>

并在加载完成后显示内容：

And show content after done loading:

<div ng-show="!delay">
    Content is loaded.
</div>

现在，每次用户在下拉菜单中选择新值时，都会触发 $ scope.delay 设置为 true 会导致微调框显示，并在达到 200 ，它将设置为 false 导致微调框隐藏。

Now, every time the user selects a new value in the dropdown menu, it will trigger$scope.delay to be set totrue causing the spinner to show, and when it reaches 200, it will be set to false causing the spinner to hide.

这篇关于ng-show指令可以延迟使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！