AngularJS：将一个加载程序元素添加到DOM的顶部

一直试图找出如何做到这一点最好的方法，但没有找到任何答案，不知道我是否在搜索或没有人问过这个问题。可能是第一个，但无论如何。AngularJS：将一个加载程序元素添加到DOM的顶部

我想知道什么最好的方法是在AngularJS中添加一个元素到DOM的顶部（以便它在其他事物之上）？

我现在对这个问题的解决方案是显示一个带有加载微调器的模式，但我认为这是一个丑陋的解决方案，因为它不应该很难将我自己的div元素添加到正在显示的DOM微调。

这是代码，我在我的模式现在：

<div class="modal-body" style="text-align: center;"> 
    <i class="fa fa-spinner fa-spin fa-5x"></i> 
</div>

所以你可以理解为什么我认为这是不必要的和丑陋的有它的一个模式。我一直在阅读有关指令，但并不确定它是如何显示的，以及如何显示它在我想要显示的位置。

来源

2014-09-22 jwanglof

你需要玩Z-index的绝对/固定位置。你有演示..？ – PSL 2014-09-22 21:21:13

看看[角加载栏]（http://chieffancypants.github.io/angular-loading-bar/） – meriadec 2014-09-22 21:25:30

在Angular中，为了使用DOM，您需要一个指令。而要控制装载机，你需要一个服务。 Here is a very simple demo for you。其原理是：指令手表服务状态变化，并绘制 “装载机” 如果服务说，装载机768,16呈现：

的index.html

<!DOCTYPE html> 
<html data-ng-app="Demo"> 
    <head> 
    <script data-require="[email protected]" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 
    <body data-ng-controller="LoaderController as ctrl"> 
    <div data-loader class="loader" data-ng-class="{'visible':Loader.visible}"></div> 
    <button data-ng-click="ctrl.show(true)">Loader</button> 
    </body> 
</html>

的script.js

(function() { 
    'use strict'; 

    angular.module('Demo', []); 

    angular.module('Demo').directive('loader', [function(){ 
    return { 
     'restrict' : 'A', 
     'controller' : ['$scope', 'Loader', function($scope, Loader){ 
     $scope.Loader = Loader; 
     }] 
    } 
    }]); 

    angular.module('Demo').factory('Loader', [function(){ 
    var instance = {} 

    instance.show = function(on){ 
     instance.visible = on; 
    } 

    return instance; 
    }]); 

    angular.module('Demo').controller('LoaderController', ['$timeout', 'Loader', function($timeout, Loader){ 
    this.show = function(){ 
     Loader.show(true); 
     $timeout(function(){ 
     Loader.show(false); 
     }, 5000) 
    } 
    }]); 
})();

style.css

html, body { 
    margin: 0; 
    padding: 0; 
} 

.loader { 
    opacity: .5; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(255, 0, 0, 0.5); 
    display: none; 
} 

.loader.visible { 
    display: block; 
}

来源

2014-09-22 22:20:45 madhead

这工作很好！非常感谢 – jwanglof 2014-09-23 08:31:06

我刚刚为我的一个项目创建了这样的东西。您可以制作一个div并将大小设置为屏幕的100％。在其上设置一些变量，以便仅在数据加载时才显示。

我用下面的CSS矿：

#overlay { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,.5); 
    z-index:10000; 
    text-align: center; 
    vertical-align: middle; 
}

它重要的是要一个大的z-index以便它显示了一切之上，我用了一个半透明的覆盖。你可以根据自己的喜好来设计风格。

和HTML类似如下：

<div id="overlay" data-loading> 
     <i class="icon-spinner icon-do-spin" ></i> 
</div>

仅供参考 - “图标-DO旋”是由FontAwesome提供动态显示您正在使用的旋转图标阴凉类，以及“数据加载”是我用来检查所有http挂起请求何时完成的指令。你可以使用像ng-show/ng-hide/ng-if来显示或隐藏加载div。

来源

2014-09-22 22:11:02 jadams

我接受@ madhead的答案，但我最终也使用了CSS的部分，所以也谢谢你= ） – jwanglof 2014-09-23 08:31:47

AngularJS：将一个加载程序元素添加到DOM的顶部

回答

相关问题