Значення візуалізації без прив'язки даних

В AngularJS, як я можу відтворити значення без двостороннього прив'язки даних? Можна захотіти зробити це з міркувань продуктивності, або навіть відтворення значення в певний момент часу.

У наступних прикладах обидва використовують прив'язку даних:

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

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

Як зробити візуалізацію value без прив'язки даних?

Кутова 1,3+

У версії 1.3 Angular підтримує це, використовуючи такий синтаксис.

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

Як зазначено у цій відповіді .

Кутова 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/

Деякі з вас, можливо, використовують кутовий 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')

Схоже, у Angular 1.3 (починаючи з бета-версії 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 кутового: 15 секунд для 2000 рядків і 420mo оперативної пам'яті ( Plunker )

За допомогою ngRepeat та модуля @OverZealous: 7 секунд для 2000 рядків та 240 місяців оперативної пам'яті ( Plunker )

За допомогою ngRepeat та директиви @Connor: 8 с для 2000 рядків та 500 міс оперативної пам'яті ( 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>