Question

我在angular-js中创建一个应用程序（带有必需的js）。我想显示一个启动加载器，直到页面上的所有html都准备好显示给用户。

Boos通过必需的

捕获应用程序

 var app = angular.module('app', ['ngRoute','ngSanitize']);
    app.init = function() {
        angular.bootstrap(document, ['app']);
    }

我的nglCloak指令看起来像这样

DirectivesModule.directive('ngCloak', ['$http', '$rootScope', '$timeout', '$q', '$timeout', 'header',
        function($http, $rootScope, $timeout, $q, $timeout, header) {
            return {
                priority: 0,
                compile: function(element, attr) {
                    document.getElementById("loading_screen_logo").style.display = "none";
                    document.getElementById("loading_screen_background").style.backgroundImage = "none";
                }
            };
        }
    ]);

我的HTML

    <body class="page-body" ng-controller="cusAppController">
  <div class="ocntainer" id="loading_screen_background" >
    <div id="loading_screen_logo" style="display:block" ></div>
    <span ng-cloak >

    /*all html content goes here*/

    </span>
 </div>
 <script data-main="../../themes/myTheme/js/main" src="../../themes/myTheme/source/js/require.js"></script>
</body>

我的Css

 [ng\:cloak], [ng-cloak], .ng-cloak {
     display: none !important;
    }

   #loading_screen_background {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #F1F1F1;
        z-index: 0;
        /*-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(black));*/
    }

    #loading_screen_logo{
        text-align: center;
        background-image: url('../../themes/ngCus/images/app_loader_80_80.gif');
        background-repeat: no-repeat;
        background-position: center top;
        position: relative;
        z-index: 100000;
        height: 100%;
    }

经过一些工作后，我找到了ng-cloak指令，它在所有指令按照angular docs.中提到的编译后执行。对于数据我已经将我的api调用解析，因此数据在路由更改之前存在。

以上方法适用于少量api调用和页面上很少的html组件。但是当我的html组件变得更多时，我的页面显示为空白，随着html通过指令或模板准备好，逐个加载组件。

任何人都知道如何处理这个问题？预期的效果就像我们登录时gmail所做的那样。

Angular js：隐藏html并显示加载器，直到读取所有html进行显示

0 个答案: