angular-spinner 在页面呈现之前停止旋转答案

【问题标题】：angular-spinner stops spinning before the page rendersangular-spinner 在页面呈现之前停止旋转
【发布时间】：2016-05-12 19:42:35
【问题描述】：

我有一个 angularJs 视图页面，其中进行了许多 Web 服务调用以填充该页面。我在一个 div 中显示 angular-spinner 并隐藏内容，直到我的所有数据都从 Web 服务中获取。但是我注意到微调器开始正常，但在隐藏的 div 呈现到视图之前它会冻结（停止旋转）。如何保持微调器旋转直到 div 被渲染？

   $scope.myData = 'a huge list of records from a slow WebService';

    <div class="container">
        <div ng-show="!myData" spinner>Loading....
          <span us-spinner="{radius:30, width:8, length: 16}"></span>
        </div>

       <div ng-hide="!myData" class="details">
           <div>content 1<div>
           <div>content 2<div>
           ....
           <div>content n</div>
        </div>
    </div>
</div>

【问题讨论】：

您是否使用服务来获取数据？

标签： angularjs spinner

【解决方案1】：

我想你使用 ng-repeat 来渲染视图，而 ng-repeat 是异步操作。
当 ng-repeat 完成工作时，您应该停止微调器。
ng-repeat finish event

【讨论】：

【解决方案2】：

当所有内容都从service 加载时，您应该隐藏加载程序并使用promise

  $scope.showLoader = true;

  serv.getData = function () {
    var defer = $q.defer();

    $http.get(url).success(function (data) {
      $scope.data = data;
      $scope.showLoader = false;
    })

    return defer.promise;

  };

html

<div ng-show="showLoader" spinner>Loading....
   <span us-spinner="{radius:30, width:8, length: 16}"></span>
</div>

【讨论】：