Я думаю, что использование 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