9

私はこれが示されているスピナーを持っていますng-show="loading>0"

このスピナーを遅延 (たとえば 1 秒) で表示する方法はありますか?

複数のリクエストで読み込みカウンターが同期しなくなるため、タイムアウトを使用できません。

私が必要としているのは、ng-showvia css トランジションなどの遅延です。

4

3 に答える 3

5

これは、私のニーズに合ったより簡単なアプローチです。アクションが何であるかに応じて、機能setDelay()を要素に結び付けます。たとえば、私の場合setDelay()、選択入力に結び付けました。

トリガー 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。

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

$scope.delay次に、 ng-show のフラグとして簡単に使用できます。

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

読み込みが完了したらコンテンツを表示します。

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

これで、ユーザーがドロップダウン メニューで新しい値を選択するたびに、スピナーが表示$scope.delayされるように設定され、値trueが に達すると、スピナーが非表示200になるように設定されます。false

于 2015-07-13T21:57:49.560 に答える