如何为 Angular js 应用程序添加加载 DIV？答案

【问题标题】：How to add loading DIV for angular js application?如何为 Angular js 应用程序添加加载 DIV？
【发布时间】：2014-08-17 10:33:04
【问题描述】：

我有一个带有 angularjs 的简单应用程序，在后台加载数据时它显示空白页面，在 angular js 完成加载模板后，我可以查看数据。我想在加载时添加加载微调器，加载完成后它应该隐藏。

几乎 50-100 条记录，还有图片。

<ul id='example-messages' class='large-block-grid-1'>
        <li ng-repeat='msg in messages'>
          <!--<strong class='example-chat-username'>{{msg.startTime}}</strong>
          {{msg.endTime}} -->
          <h4><a ng-href="{{msg.offerUrl}}">{{msg.offerName}}</a></h4>


          <div class="row">
            <div class="medium-4 columns">
              <a ng-href="{{msg.offerUrl}}"><img src="image.jpg" /></a>
            </div>
            <div class="medium-8 columns">
              <h5><a ng-href="{{msg.offerUrl}}">{{msg.offerCondition}}</a></h5>
              <h6>{{msg.offerDescription}}</h6>
              <div class="row" style="padding-top:22px">
            <div class="medium-5 columns">
              <div class="alert-box success radius">{{msg.startTime}}</div>
            </div>

            <div class="medium-5 columns">
              <div class="alert-box warning radius">{{msg.endTime}}</div>
            </div>

          </div>
            </div>
        </div>
        </li>
  </ul>

【问题讨论】：

你的代码在哪里？
试试这个：jsfiddle.net/KmXTy/1
你可以使用Angular loading bar

标签： javascript angularjs

【解决方案1】：

这是从我的一个实时 Angular 项目中提取的：

HTML (index.html)：

<div ng-controller="MainCtrl">
  <div ng-cloak ng-show="loading" id="overlay">
    <div class="loader"></div>
  </div>
</div>

SCSS（基本上只是为了将#overlay 固定在其他层之上，并为.loader 应用漂亮的动画）：

#overlay {
  background: rgba(0,0,0,.85);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}


$colors:
  hsla(337, 84, 48, 0.75)
  hsla(160, 50, 48, 0.75)
  hsla(190, 61, 65, 0.75)
  hsla( 41, 82, 52, 0.75);
$size: 2.5em;
$thickness: 0.5em;

// Calculated variables.
$lat: ($size - $thickness) / 2;
$offset: $lat - $thickness;

.loader {
  position: relative;
  width: $size;
  height: $size;
  transform: rotate(165deg);

  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: $thickness;
    height: $thickness;
    border-radius: $thickness / 2;
    transform: translate(-50%, -50%);
  }

  &:before {
    animation: before 2s infinite;
  }

  &:after {
    animation: after 2s infinite;
  }
}

当然，在控制器中，只要你想显示或隐藏加载指示器：

$scope.root.loading = true;
$scope.root.loading = false;

【讨论】：

【解决方案2】：

您可以添加一个值设置为false 的范围布尔变量，并在您的http 承诺成功中将值更改为true。

JS代码示例：

function myController($scope, YourDataServer) {
    $scope.dataLoaded = false;

    YourDataServer
        .query()
        .$promise
        .then(
            function(result) {
                $scope.dataLoaded = true; // set the value to true
            });
}

HTML 看起来像：

<div id="loadingBar" ng-show="!dataLoaded">Loading...</div>

<div id="dataWrapper" ng-show="dataLoaded">
    <!-- data goes here -->
</div>

【讨论】：

【解决方案3】：

下面是加载指示器的几个链接

angular-spinner 或 angular-sham-spinner

还阅读了这个BLOG，其中详细介绍了微调器如何与 angularjs 一起工作

如果你想自己实现它，下面的代码会让你开始......

app.directive("spinner", function(){
return: {
restrict: 'E',
scope: {enable:"="},
template: <div class="spinner" ng-show="enable"><img src="content/spinner.gif"></div>
}
});

我还没有测试过代码，但指令不会比这更复杂...

【讨论】：