AngularJs渲染

Alessandro Cappellozza 发表于 Dev

亚历山德罗·卡佩洛扎（Alessandro Cappellozza）

前言：我有一个带有控制器的AngularJS应用程序。在此控制器的视图中，我ng-repeat使用JSON对象填充了一个列表。如果我的设备较慢，例如电话，则渲染速度可能太慢，以至于我可以在一段时间后查看空白页面，然后再等待几秒钟。

问题：等待渲染时如何显示预加载？是否可以绑定一些技巧或事件以显示“等待”行，然后隐藏该行并显示渲染的列表（完成时）。

谢谢大家

PS没有jQuery和朋友，仅AngularJS。

诺皮·吉拉斯（Noypi Gilas）

使用披风plnkr：http：//plnkr.co/edit/lgNSdTrMMexHykUBIqnT？p = preview

此示例非常适用，并且不限于ng-repeat，如果您下载此示例合理，请发表评论

注意：此Genius示例正在运行，如果您不赞成，请发表评论

尽管该示例使用手动引导，但其行为是相同的。它只是使用手动引导程序来演示如果未完成angularjs引导时的外观。

<!DOCTYPE html>
<html>

  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
    <script>

      function jsBootStrap() {
        console.log('bootstrapping');
        angular.bootstrap(document);
      }

      angular.module("ng").run(function($rootScope){
        $rootScope.DisplayMyData = "AngularJS Loves Noypi";
      });

    </script>

    <style>
      .preview{
        display:none;  
      }
      .ng-cloak.preview {
        color:blue;
        display:block!important;
      }       
      .ng-cloak.realview {
        display:none;
      }
    </style>
  </head>

  <body>
    <div class="ng-cloak preview">
      I was shown before AngularJS. <br/>
      Credits <u>ngtutorial.com/learn/bootstrap</u>.
    </div> 
    <div class="ng-cloak realview">
        <span ng-repeat="i in [1,2,3,4]">
            {{$index}} = {{DisplayMyData}}<br/>
        </span><br/>
    </div>


    <button onclick="jsBootStrap()">bootstrap document</button>

  </body>

</html>