web-dev-qa-db-ja.com

Angular JSにおけるngBind、ngBindHtm、ngBindTemplateの違い

Angular JSは初めてです。

Angular JSのngBind、ngBindHtmとngBindTemplateの違いを例を挙げて説明してもらえますか？

angularjsng-bind-htmlng-bind
22
Syed

ng-bind

ngBindは、指定されたHTML要素のテキストコンテンツを指定された式の値で置き換えるために使用されます。たとえば、次のようなhtmlがある場合、<b ng-bind="name"></b>で、コントローラーに名前の値として$scope.name = "John"を指定します。これは<b>John</b>になります。ただし、複数の値を使用して単一のhtml要素にバインドすることはできません。例えば

$scope.first_name = "John";
$scope.second_name = "D";
<b ng-bind="first_name second_name"></b>

これは、結果を<b>John D</b>bind first_nameとしてのみ提供しません。したがって、複数の値をバインドするには、ng-bind-templateを使用できます

ng-bind-template

 $scope.first_name = "John";
 $scope.second_name = "D";

<b ng-bind-template="{{first_name second_name}}"></b>

これは<b>John D</b>になりますが、この両方でhtmlタグをレンダリングすることはできません。 HTMLテンプレートのレンダリングには、ng-bind-htmlを使用できます。

ng-bind-html

$scope.name = "<b>John</b>";
<div ng-bind-html="name"></div>

これはになりますジョン<b>John</b>を表示する代わりに。つまり、htmlタグを表示する代わりに、htmlをレンダリングします。

このリンクをクリックして表示 例

46
Sajith

ngBind：

NgBind属性は、Angularに、指定されたHTML要素のテキストコンテンツを特定の式の値で置き換え、その式の値が変更されたときにテキストコンテンツを更新するように指示します。

ngBindTemplate：

NgBindTemplateディレクティブは、要素のテキストコンテンツをngBindTemplate属性のテンプレートの補間で置き換える必要があることを指定します。 ngBindとは異なり、ngBindTemplateには複数の{{}}式を含めることができます。一部のHTML要素（TITLEやOPTIONなど）にSPAN要素を含めることができないため、このディレクティブが必要です。 ngBindTemplateは「文字列」のみを実行します

違いの簡単なメタファー：

ngBind「オブジェクト」のみを実行します。

ngBindTemplate「文字列」のみを実行します

3
Jebasuthan