Question

我在页面上加载时出现问题，在页面上显示纯文本中的angularjs变量几秒钟直到角度编译...有没有办法显示加载器或只是空白直到角度编译？

这是我的HTML：

<li ng-repeat="x in notys" class="item js-item">
                <a href="/project/<% x.project_id %>"  class="notification-link">
                    <div class="details">
                        <!--SERVER SIDE-->
                        <span ng-if="x.type == 'AnswerProject'" class="title">New answer added <i>"<% x.subject %>"</i> for <b><% x.body %></b> group, click to check your project.</span>
                        <span ng-if="x.type == 'QuestionProject'" class="title">New question/s added for <b> <% x.subject %> </b> group, check your project <b> <% x.body %> </b></span>

                        <span ng-if="x.type == 'GroupProject'" class="title">New group created: <b> <% x.subject %> </b>. New project assigned to you <b> <% x.body %> </b></span>
                        <span ng-if="x.type == 'GroupProjectUpdate'" class="title">Group <b> <% x.subject %> </b> updated, for <b> <% x.body %> </b> project.</span>

                        <span ng-if="x.type == 'NewComment'" class="title">User <b> <% x.subject %> </b> commented: <b> <% x.body %> </b> in some of your projects. Click to check.</span>

                        <!--CLIENT SIDE-->
                        <span ng-if="x.type == 'NewCommentClient'" class="title">User <b> <% x.name %> </b> commented: <b> <% x.text %> </b> in some of your projects. Click to check.</span>

                        <span ng-if="x.type == 'GroupProjectClient'" class="title">New group created: <b> <% x.name %> </b>. New project assigned to you <b> <% x.project_name %> </b></span>
                        <span ng-if="x.type == 'GroupProjectUpdateClient'" class="title">Group <b> <% x.name %> </b> updated, for <b> <% x.project_name %> </b> project.</span>

                        <span ng-if="x.type == 'AnswerProjectClient'" class="title">New answer added <i>"<% x.answer %>"</i> for <b><% x.groupName %></b> group, click to check your project.</span>
                        <span ng-if="x.type == 'QuestionProjectClient'" class="title">New question/s added for <b> <% x.gName %> </b> group, check your project <b> <% x.name %> </b></span>

                        <p><time-ago from-time="<% x.created_at %>"></time-ago></p>
                    </div>
                </a>
            </li>

Answer 1

AngularJS实际上有一个指令来防止显示未编译的内容：ng-cloak

https://docs.angularjs.org/api/ng/directive/ngCloak

您可以在DOM中的div /元素上应用，防止它下面的每个元素在编译之前显示

<div ng-cloak>
</div>

Answer 2

您的问题是在加载页面资源时文本是可见的。我建议使用css将html标签设置为display：none，然后使用angular的手动bootstrap选项，这样你只能在bootstrap之后显示html标签。这是一个例子：

    // to turn off automatic bootstrapping, remove the ng-app tag from the html

    var app = angular.module('someapp', []),
        htmlNode = document.getElementsByTagName('html')[0];

    // wait for the document to be ready - similar to jquery
    angular.element(document).ready(function(){

        // manually bootstrap the element
        angular.bootstrap(angular.element(), ['gts-frontEnd']);

        // show the html element again
        htmlNode.style.display = 'block';
    });

以下是documentation

Answer 3

这实际上取决于您的具体用例，但一种简单的方法将遵循这样的模式：

.controller('MainCtrl', function ( $scope, myService ) {
  $scope.loading = true;
  myService.get().then( function ( response ) {
    $scope.items = response.data;
  }, function ( response ) {
    // TODO: handle the error somehow
  }).finally(function() {
    // called no matter success or failure
    $scope.loading = false;
  });
});
And then react to it in your template:

<div class="spinner" ng-show="loading"></div>
<div ng-repeat="item in items>{{item.name}}</div>

来源：Showing Spinner GIF during $http request in angular

等角度编译然后加载页面[AngularJS]

3 个答案: