Question

我最近开始使用angular-loading-bar.js来显示屏幕上http调用的进度。默认情况下，蓝色进度条显示在屏幕顶部，但不是它显示在屏幕顶部，我只想在特定的div中。如 this answer 所示，要激活进度条，您只需添加以下代码行，

angular.module('app', ['angular-loading-bar']);

然而，在执行此操作时，进度条显示在屏幕顶部，我有一个div，我希望该进度条显示在该特定div中。当我打开核心angular-loadingbar.js时，我发现他们正在使用以下行插入进度条，

this.parentSelector = 'body';
this.spinnerTemplate = '<div id="loading-bar-spinner"><div class="spinner-icon"></div></div>';
this.loadingBarTemplate = '<div id="loading-bar"><div class="bar"><div class="peg"></div></div></div>';

正如您可以看到父选择器是body，有没有办法可以从调用加载栏的页面更改此parentSelector？

感谢任何帮助，提前谢谢！

Answer 1

我不会使用任何外部库来完成屏幕上的简单加载。最简单的解决方案是在任何您喜欢的地方创建DOM节点，并仅在$rootScope中的某个特定标志为true时显示它，i。 E：

<div class="my-gif-loader" ng-if="$root.loading">...</div>

Answer 2

定位模板：

如果您想定位loadingBar或微调器，请为您希望模板注入的元素提供CSS选择器。默认值为<body>元素：

angular.module('myApp', ['angular-loading-bar'])
  .config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
    cfpLoadingBarProvider.parentSelector = '#loading-bar-container';
    cfpLoadingBarProvider.spinnerTemplate = '<div><span class="fa fa-spinner">Custom Loading Message...</div>';
  }])


<div id="loading-bar-container"></div>

取自Github

上的 angular-loading-bar 文档

如何在特定的“div”中而不是在页面顶部显示角度加载条？

2 个答案: