データバインディングなしで値をレンダリングする

AngularJSでは、双方向データバインディングなしで値をどのようにレンダリングできますか？パフォーマンス上の理由から、または特定の時点で値をレンダリングするために、これを行うことができます。

次の例では、どちらもデータバインディングを使用しています。

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

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

データバインディングvalue なしでどのようにレンダリングしますか？

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/

あなたの一部は角度のあるバタランを使用している可能性があり、コメントで述べたように、このディレクティブを使用する場合、要素がまだバインドされていない場合でも要素としてバインドとして表示されます。これを試してください、それはうまくいくはずです （テストされていません）。うまくいったかどうかコメントで教えてください。

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

ワンタイムバインディング

::で始まる式は、1回限りの式と見なされます。1回限りの式は、安定すると再計算を停止します。これは、式の結果が未定義の値でない場合、最初のダイジェストの後に発生します（以下の値安定化アルゴリズムを参照）。

bindonceモジュールを使用します。JSファイルをインクルードし、それを依存関係としてアプリモジュールに追加する必要があります。

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

このライブラリを使用すると、最初に初期化されたときに一度だけバインドされたアイテムをレンダリングできます。これらの値をさらに更新しても無視されます。これは、レンダリング後に変更されないものについて、ページ上のウォッチの数を減らすための優れた方法です。

使用例：

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

このように使用した場合、使用可能なプロパティvalueが設定されますが、時計は無効になります。

@OverZealousと@Connorの回答の比較：

角度のある従来のngRepeatを使用すると、2000行で15秒、RAMが420mo（Plunker）

ngRepeatと@OverZealousのモジュールを使用する場合：2000行で7秒、240moのRAM（Plunker）

ngRepeatと@Connorのディレクティブを使用する場合：2000行で8秒、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>