Отображать значение без привязки данных

Ответ 1

Angular 1.3 +

В 1.3, Angular поддерживает это, используя следующий синтаксис.

<div>{{::message}}</div>

Как упоминалось в этом ответе.

Angular 1.2 и ниже

Это просто и не требует плагина. Проверьте это.

Эта небольшая директива легко выполнит то, что вы пытаетесь достичь

app.directive('bindOnce', function() {
    return {
        scope: true,
        link: function( $scope ) {
            setTimeout(function() {
                $scope.$destroy();
            }, 0);
        }
    }
});

Вы можете связать один раз, как этот

<div bind-once>I bind once - {{message}}</div>

Вы можете привязываться как обычный

<div ng-bind="message" bind-once></div>

Демо: http://jsfiddle.net/fffnb/

Некоторые из вас могут использовать Angular batarang, и, как упоминалось в комментариях, если вы используете эту директиву, элемент по-прежнему отображается как привязка, когда это не так, я уверен, что это имеет какое-то отношение к классам, которые прикрепленный к элементу, попробуйте это, он должен работать (не проверен). Дайте мне знать в комментариях, если это сработает для вас.

app.directive('bindOnce', function() {
    return {
        scope: true,
        link: function( $scope, $element ) {
            setTimeout(function() {
                $scope.$destroy();
                $element.removeClass('ng-binding ng-scope');
            }, 0);
        }
    }
});

@x0b: Если у вас есть OCD, и вы хотите удалить пустой атрибут class, сделайте это

!$element.attr('class') && $element.removeAttr('class')

Ответ 2

Похоже, что Angular 1.3 (начиная с бета-версии 10) имеет однократную привязку:

https://docs.angularjs.org/guide/expression#one-time-binding

Одноразовая привязка

Выражение, начинающееся с::, считается одноразовым выражением. Одноразовые выражения остановят пересчет, как только они будут стабильными, которое происходит после первого дайджеста, если результатом выражения является не undefined (см. ниже алгоритм стабилизации стоимости).

Ответ 3

Используйте модуль bindonce. Вам нужно будет включить JS файл и добавить его в зависимости от вашего модуля приложения:

var myApp = angular.module("myApp", ['pasvaz.bindonce']);

Эта библиотека позволяет отображать элементы, привязанные только один раз - при их первой инициализации. Любые дополнительные обновления этих значений будут проигнорированы. Это отличный способ уменьшить количество часов на странице для вещей, которые не будут меняться после их рендеринга.

Пример использования:

<div bo-text="value"></div>

При использовании подобным образом свойство под value будет установлено после его доступности, но тогда часы будут отключены.

Ответ 4

Сравнение ответов @OverZealous и @Connor:

С традиционным ngRepeat angular: 15 секунд для 2000 строк и 420 мА ОЗУ (Plunker)

С ngRepeat и модулем @OverZealous: 7s для 2000 строк и 240mo ОЗУ (Plunker)

С ngRepeat и директивой @Connor: 8s для 2000 строк и 500mo ОЗУ (Plunker)

Я провел тесты с Google Chrome 32.

Ответ 5

В качестве альтернативы существует angular-once package:

Если вы используете AngularJS, имейте проблемы с производительностью и вам нужно отображать партии данных readonly, этот проект для вас!

angular-once был действительно вдохновлен bindonce и предоставляет аналогичные атрибуты once-*:

<ul>
    <li ng-repeat="user in users">
      <a once-href="user.profileUrl" once-text="user.name"></a>
        <a once-href="user.profileUrl"><img once-src="user.avatarUrl"></a>
        <div once-class="{'formatted': user.description}" once-bind="user.description"></div>
    </li>
</ul>