Javascript AngularJS：将加载程序元素添加到DOM顶部_Javascript_Angularjs_Dom_Angularjs Directive

Javascript AngularJS：将加载程序元素添加到DOM顶部

javascript angularjs dom

Javascript AngularJS：将加载程序元素添加到DOM顶部,javascript,angularjs,dom,angularjs-directive,Javascript,Angularjs,Dom,Angularjs Directive,我一直在试图找到最好的方法，但没有找到任何答案，不知道我是否在搜索方面很差劲，或者没有人问过这个问题。可能是第一个，但无论如何我想知道在AngularJS中将元素添加到DOM顶部（以便它位于所有其他元素之上）的最佳方法是什么我现在对这个问题的解决方案是显示一个带有加载微调器的模态，但我认为这是一个丑陋的解决方案，因为将我自己的div元素添加到显示微调器的DOM中应该不会那么困难这是我现在模态中的代码： <div class="modal-body" style="text-align

我一直在试图找到最好的方法，但没有找到任何答案，不知道我是否在搜索方面很差劲，或者没有人问过这个问题。可能是第一个，但无论如何

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

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

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

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

所以你可以理解为什么我认为把它放在模态中是不必要的和丑陋的。我一直在阅读指令，但不确定它会是什么样子，以及我想在哪里显示它。

我刚刚为我的一个项目创建了类似的东西。您可以制作一个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索引，以便它显示在所有内容的顶部，我使用了一个半透明的覆盖层。你可以随心所欲地设计风格

和html，如下所示：

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

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

在Angular中，为了使用DOM，需要一个指令。要控制加载器，您需要一个服务。其原理是：指令监视服务中的状态变化，并在服务要求提供加载器时绘制“加载器”：

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>

style.css

(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)
    }
  }]);
})();

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;
}

您需要使用z-index进行绝对/固定定位。你有一个演示吗？看看我接受了@madhead的答案，但最后我也使用了你的部分CSS，所以也谢谢你=）