В видео AngularJS в какой-то момент я увидел, как избежать видимого выражения до того, как Javascript проанализирует его. Но я не помню, как это было сделано...
У меня есть <div id='message'>{{$root.initializing.status}}</div>, что я хотел бы сказать "Загрузка...", прежде чем у AngularJS есть возможность проанализировать его. Как это можно сделать?
Как упоминалось выше, используйте ng-cloak, но также добавьте следующее в свой CSS, если оно загружено первым на вашей странице.
[ng\:cloak],[ng-cloak],.ng-cloak{display:none !important}
Это гарантирует, что ваш шаблон div скрыт. Ниже этого шаблона div добавьте что-то вроде
Loading...Назначение $root.initializing.status вызывает истинное значение для ng-hide.
Вот jsfiddle и следующий код:
HTML:
<div ng-controller='Ctrl'>
<div id='message'>{{$root.initializing.status}}</div>
<div ng-hide="$root.initializing.status">Loading...</div>
</div>
JS:
function Ctrl($timeout, $scope) {
///simulating loading
$timeout(function () {
$scope.$root = {
initializing: {
status: 'Complete!'
}
}
}, 2000);
}
Используйте ng-cloak http://docs.angularjs.org/api/ng.directive:ngCloak
<div id="template1" ng-cloak>{{ 'hello' }}</div>
или ng-bind http://docs.angularjs.org/api/ng.directive:ngBind
Hello <span ng-bind="name"></span>!
<div id='message'><span ng-bind="$root.initializing.status"></span></div>
Вы можете скрыть выражение с помощью ngCloak, см. этот ответ:
Что касается показа загрузки, вы можете просто установить $root.initializing.status значение по умолчанию "Загрузка", а затем reset, когда вы получите свои данные.
Используйте директиву ng-cloak, чтобы избежать мерцания при загрузке страницы.
На всякий случай кто-то найдет эту информацию полезной, я использую следующий workaroud.
<div ng-class="{'hide', '': ctrl.pageLoaded}">...</div>
и
.hide{display: none;}
Я использую это, чтобы скрыть все содержимое, которое в качестве выражений angular до загрузки контроллера, где я установил this.pageLoaded = true.