Элементы кода AngularJS отображаются в пользовательском интерфейсе HTML до получения ответа API.

Я использую Angularjs и HTML5. У меня есть страница, на которой некоторые элементы зависят от переменной Angularjs. Например, в моем HTML-коде у меня есть:

<div class="col-xs-12 col-sm-4 top-buffer">
    <div class="info-box">
        <div data-ng-bind-html="statusClass"></div>
        <div class="info-box-content">
            <span class="info-box-text">Status</span> <span
                class="info-box-number">{{statusName}}</span>
        </div>
        <!-- /.info-box-content -->
    </div>
    <!-- /.info-box -->
</div>

или ng-show на весь div

<div data-ng-show="isBusy" class="col-xs-12 col-sm-6 col-sm-offset-3">

а также

<div data-ng-show="!isBusy" class="col-xs-12 col-sm-6 col-sm-offset-3">

поэтому один скрыт, а другой показан.

statusName и statusClass, как и isBusy и все остальные переменные, извлекаются из http-вызова Angularjs, поэтому на одну секунду моя страница выглядит иначе. . Как избежать такого поведения? Я подумал, можно ли загрузить эту переменную перед загрузкой страницы, но для data-ng-bind-html?


person luca    schedule 29.06.2017    source источник
comment
Используйте 1_? docs.angularjs.org/api/ng/directive/ngCloak   -  person Red    schedule 29.06.2017


Ответы (1)


Я думаю, что использование ng-cloak решит проблему в вашем случае.

Директива ngCloak используется для предотвращения краткого отображения html-шаблона AngularJS браузером в необработанном (нескомпилированном) виде во время загрузки вашего приложения. Используйте эту директиву, чтобы избежать нежелательного эффекта мерцания, вызванного отображением шаблона html.

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

Итак, что вы можете сделать, это вызвать директиву ng-cloak для элемента, который вы хотите дождаться рендеринга, прежде чем страница будет загружена.

<div ng-show="isBusy" class="col-xs-12 col-sm-6 col-sm-offset-3" ng-cloak>

ОБНОВЛЕНИЕ (в соответствии с заданной скрипкой):


ng-show показывает или скрывает данный элемент HTML на основе предоставленного выражения.

Директива ngShow показывает или скрывает заданный элемент HTML на основе выражения, предоставленного атрибуту ngShow.

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

Вы визуализируете две кнопки. Обе кнопки имеют одно и то же выражение, за исключением того, что одна кнопка проверяет, является ли выражение true, а другая проверяет, является ли выражение false

<!-- True -->
<button ng-show="clickedStartButton" ng-cloak>{{text}}</button>

<!-- False -->
<button ng-show="!clickedStartButton" ng-cloak>{{text2}}</button>

ng-show="!clickedStartButton" всегда будет возвращать false при запуске, потому что ему еще не присвоено значение. Так что этот button всегда будет отображаться. За исключением, конечно, когда вы делаете $scope.clickedStartButton = true. Но потом

<button ng-show="clickedStartButton" ng-cloak>{{text}}</button>

будет отображаться без свойства {{text}}.

Вы можете сделать следующее, чтобы избежать этого. Проверьте, установлен ли {{text2}}. Если нет, то hide иначе show

<button ng-if="!clickedStartButton && text2" ng-cloak>{{text2}}</button> 

ДЕМО

var app=angular.module('timerApp', []);
app.controller('timerController', ['$scope', '$interval', '$timeout', function ($scope, $interval, $timeout) {
		$timeout(function() {$scope.text="PROVA"; $scope.text2="PROVA2"; $scope.clickedStartButton=true; }, 2000);
   
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
Will be rendered after 2 seconds

<div ng-app="timerApp" ng-controller="timerController">
    <button ng-if="clickedStartButton" ng-cloak>{{text}}</button>
    <button ng-if="!clickedStartButton && text2" ng-cloak>{{text2}}</button>
</div>

person Red    schedule 29.06.2017
comment
Я попробовал ng-cloak, как в вашем примере, но он не работает, все еще показывает элемент до того, как переменная будет готова. У меня есть adiv с ng-show=isBusy и один с ng-show=!isBusy - person luca; 29.06.2017
comment
Можете ли вы сделать скрипку или plunkr? Было бы очень полезно. - person Red; 29.06.2017
comment
Также поместите ng-cloak также на ng-bind-html div. Вы можете поставить ng-cloak на все элементы, которые отображают данные из angular. - person Red; 29.06.2017
comment
на data-ng-bind-html, кажется, работает, но на ng-show он все еще показывает div - person luca; 29.06.2017
comment
Попробуйте изменить ng-show на ng-if. Это в основном делает то же самое. ng-if клонирует element, а затем добавляет (рендерит) оператор true или false. Если false, он удаляет элемент из дерева dom. - person Red; 29.06.2017
comment
Тоже самое, может проблема с условием not. Здесь jsfiddle.net/krsz9/294 видно, что кнопка появляется до установки переменной. Я могу создать другую противоположную переменную.... - person luca; 29.06.2017
comment
Я знаю проблему, я скоро обновлю свой awnser. Мне ехать 15 минут. Когда заболел, обнови его. - person Red; 29.06.2017