Angularjs устанавливает значения по умолчанию для отображения перед оценкой

Я использовал angularJs для действительно простых функций на существующем сайте.

Я подключаю angular к середине страницы, и все работает нормально, за исключением того, что angular загружается довольно медленно, и пользователь может увидеть {{terms.label}} на мгновение, прежде чем angular оценит его значение.

но он никогда не обновляет значение кнопки отправки. во всяком случае, я бы поспорил, что видел что-то вроде этого, но, возможно, поле ввода было без атрибута value и только модели.

любое руководство по настройке шаблона перед загрузкой angularJs оценено.

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

Ответы

Ответ 1

Лучшее, что вы можете сделать с существующей версией AngularJS, - это ng-bind. Из документации:

Один раз сценарий, в котором использование ngBind предпочтительнее {{ выражение}}, когда желательно установить привязки в шаблон, который на мгновение отображается браузером в его исходном состоянии перед Angular скомпилирует его. Поскольку ngBind является атрибутом элемента, он делает привязки невидимыми для пользователя во время загрузки страницы.

Чтобы сделать работу ng-bind в вашем случае, вам нужно будет поменять тег input на тег button следующим образом:

<div ng-controller="TermsController">
    <input type="checkbox" ng-model="terms.agree">
    <button type="submit" ng-bind="terms.label">Before</button>
</div>

Вот рабочий jsFiddle: http://jsfiddle.net/TL33r/2/

Вы можете использовать ng-cloak (см. еще один вопрос для получения дополнительной информации), но ng-cloak скроет весь элемент DOM (и его дочерние элементы), пока я считаю, что вы попросили получить значение "по умолчанию", которое будет заменено на привязку, когда выйдет "AngularJS".

Ответ 2

Вы можете скрыть элемент с атрибутом ng-cloak во время загрузки:

<div ng-app>
    <div ng-controller="TermsController" ng-cloak>
        <input type="checkbox" ng-model="terms.agree" />
        <input type="submit" value="{{terms.label}}" .. />
    </div>
</div>

Ссылка: http://docs.angularjs.org/api/ng.directive:ngCloak