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

Как в AngularJS отобразить значение без двусторонней привязки данных? Это может потребоваться из соображений производительности или даже для визуализации значения в заданный момент времени.

В следующих примерах используется привязка данных:

<div>{{value}}</div>

<div data-ng-bind="value"></div>

Как выполнить рендеринг value без привязки данных?

Угловой 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 : если у вас ОКР и вы хотите удалить пустой classатрибут, сделайте это

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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>