Избегание выражений, отображаемых при загрузке страницы

В видео AngularJS в какой-то момент я увидел, как избежать видимого выражения до того, как Javascript проанализирует его. Но я не помню, как это было сделано...

У меня есть <div id='message'>{{$root.initializing.status}}</div>, что я хотел бы сказать "Загрузка...", прежде чем у AngularJS есть возможность проанализировать его. Как это можно сделать?

Ответы

Ответ 1

Как упоминалось выше, используйте ng-cloak, но также добавьте следующее в свой CSS, если оно загружено первым на вашей странице.

[ng\:cloak],[ng-cloak],.ng-cloak{display:none !important}

Это гарантирует, что ваш шаблон div скрыт. Ниже этого шаблона div добавьте что-то вроде

Назначение $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);
}

Ответ 2

Используйте 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>!

fooobar.com/questions/80655/...

Ответ 3

<div id='message'><span ng-bind="$root.initializing.status"></span></div>

Ответ 4

Вы можете скрыть выражение с помощью ngCloak, см. этот ответ:

Предотвращать одновременное отображение двойной фигурной фигурной скобки перед angular.js компилирует/интерполирует документ

Что касается показа загрузки, вы можете просто установить $root.initializing.status значение по умолчанию "Загрузка", а затем reset, когда вы получите свои данные.

Ответ 5

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

Ответ 6

На всякий случай кто-то найдет эту информацию полезной, я использую следующий workaroud.

<div ng-class="{'hide', '': ctrl.pageLoaded}">...</div>

.hide{display: none;}

Я использую это, чтобы скрыть все содержимое, которое в качестве выражений angular до загрузки контроллера, где я установил this.pageLoaded = true.