[解決済み] データバインディングを使用しない値のレンダリング
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')
関連
-
[解決済み] JavaScript で配列に値が含まれているかどうかを確認するにはどうすればよいですか?
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] jQueryを使用しない$(document).ready相当
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] 動的に生成された要素にイベントバインディングを行うか?
-
[解決済み] CSSは常にJavascriptより優先されるべきか?
-
[解決済み】オブジェクトの配列を文字列のプロパティ値でソートする
-
[解決済み] チェックボックスが選択されているかどうかを確認するjQuery
-
[解決済み] 文字列がhtmlであるかどうかをチェックする
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] チェックボックスが選択されているかどうかを確認するjQuery
-
[解決済み] WebStormで未解決の変数が大量にある場合の警告に対処する方法は?
-
[解決済み] TypeScriptのdeclare classとinterfaceの違いとは?
-
[解決済み] node.jsで文字列のsha1ハッシュを取得するにはどうすればよいですか?
-
[解決済み] CORS OriginヘッダーとCSRFトークンによるCSRF保護
-
[解決済み] 文字列がhtmlであるかどうかをチェックする
-
[解決済み] Javascript 空の配列の削減
-
[解決済み] JavaScriptでの大文字小文字を区別しない正規表現
-
[解決済み] javascriptのキャンバスで画像をリサイズする (スムーズ)
-
[解決済み] 変異を伴わないオブジェクトからの値の削除