Question

我有一个简单的应用程序与angularjs和数据加载在背景中它显示空白页面，在角度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>

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

Answer 2

您可以添加一个范围布尔变量，其值设置为false，并在http promise成功中将值更改为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>

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

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

如何为角度js应用添加加载DIV？

3 个答案: