angularjs - Angular JS の ngBind、ngBindHtm、ngBindTemplate の違い

Question

私は初めてですAngular JS。

ngBind, ngBindHtm&ngBindTemplateの違いをAngular JS例を挙げて説明してくれる人はいますか?

Answer 1

ng バインド

ngBind は、指定された HTML 要素のテキスト コンテンツを指定された式の値に置き換えるために使用されます。たとえば、次のような html が<b ng-bind="name"></b>あり、コントローラーで name の値を として指定するとします$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> first_name をバインドするだけでは結果が得られません。したがって、複数の値をバインドするために使用できますng-bind-template

ng バインド テンプレート

 $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>

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

例を表示するには、このリンクをクリックしてください

Answer 2

ngBind:

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

ngBindTemplate :

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

違いの簡単な比喩:

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

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