web-dev-qa-db-ja.com

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

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

次の例は両方ともデータバインディングを使用します：

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

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

valueなしデータバインディングをレンダリングするにはどうすればよいですか？

javascriptangularjsdata-binding
86
Blowsie

Angular 1.3 +

1.3では、Angularは次の構文を使用してこれをサポートしていました。

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

this answer で述べたように。

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')
141
iConnor

Angular 1.3（ベータ10以降）にはワンタイムバインディングが組み込まれているようです：

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

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

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

49
Karen Zilles

bindonce module を使用します。 JSファイルを含めて、アプリモジュールへの依存関係として追加する必要があります。

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

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

使用例：

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

このように使用すると、valueの下のプロパティが使用可能になると設定されますが、ウォッチは無効になります。

20
OverZealous

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

angularの従来のngRepeatの場合：2000行の場合15秒、RAMの420mo（ （Plunker ）

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

NgRepeatおよび@Connorのディレクティブを使用：2000行で8秒、500moのRAM（ Plunker ）

Google Chrome 32でテストを行いました。

7
Gabriel

別の方法として、 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>
5
alecxe