Question

一直试图找出如何做到这一点最好的方法，但没有找到任何答案，不知道我是否吮吸搜索或没有人问过这个问题。可能是第一个，但无论如何。

我想知道在AngularJS中将一个元素添加到DOM顶部（以便它在其他所有内容之上）的最佳方法是什么？

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

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

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

所以你可以理解为什么我觉得把它放在一个模态中是不必要和丑陋的。我一直在阅读指令，但不确定它会是什么样子，以及如何将它显示在我希望它显示的位置。

Answer 1

我刚刚为我的一个项目创建了这样的东西。您可以创建一个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>

仅供参考 - ＆＃39; icon-do-spin＆＃39;是FontAwesome提供的一个很酷的类，用于为您正在使用的微调器图标设置动画，以及“数据加载”＃39;是一个我用来检查所有http挂起请求何时完成的指令。您可以使用类似ng-show / ng-hide / ng-if的内容来显示或隐藏加载div。

Answer 2

在Angular中，为了使用DOM，您需要一个指令。要控制装载机，您需要一项服务。 Here is a very simple demo for you。原则是：指令监视服务状态的变化，如果服务说装载机应该出现，则绘制“装载机”：

<强>的index.html

<!DOCTYPE html>
<html data-ng-app="Demo">
  <head>
    <script data-require="angular.js@1.2.22" 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;
}

AngularJS：将一个loader元素添加到DOM的顶部

2 个答案: