Подождите угловую компиляцию, затем загрузите страницу [AngularJS]

0

У меня проблема при загрузке страницы на странице, отображающей переменные углов в обычном тексте за несколько секунд до углового компиляции... Есть ли способ показать загрузчик или просто пробел до углового компиляции?

Вот мой 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>
  • 0
    Вы можете реализовать загрузчик или блесна в таких случаях.
Теги:

3 ответа

4
Лучший ответ

У AngularJS есть директива для предотвращения отображения некомпилированного контента: ng-cloak

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

Вы можете применить к элементу div/в DOM, чтобы каждый элемент под ним отображался перед компиляцией

<div ng-cloak>
</div>
  • 0
    Это тоже хороший ответ, безусловно, самый простой. В любом случае я предпочитаю вручную запускать приложение, чтобы иметь больше возможностей контролировать его запуск.
1

Ваша проблема в том, что текст отображается во время загрузки ресурсов страницы. Я бы предложил использовать css для установки тега html для отображения: none, а затем с помощью угловой ручной настройки бутстрапа, чтобы вы могли показать 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';
    });

Вот документация

0

Это действительно зависит от вашего конкретного варианта использования, но простой способ будет следовать шаблону, подобному этому:

.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>

источник: отображение Spinner GIF во время запроса $ http в угловом

Ещё вопросы

Сообщество Overcoder
Наверх
Меню