1. ホーム
  2. javascript

[解決済み] データバインディングを使用しない値のレンダリング

2023-05-20 11:26:52

質問

AngularJSで、2ウェイデータバインディングなしで値をレンダリングするにはどうしたらよいでしょうか。パフォーマンス上の理由から、あるいはある時点の値をレンダリングするために、これを行いたいと思うかもしれません。

以下の例では、両方ともデータバインディングを使用しています。

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

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

どのようにレンダリングすれば value がない場合 のようなデータバインディングが必要ですか?

どのように解決するのですか?

Angular 1.3+

Angular 1.3では、以下のような構文で対応しました。

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