convert - ng-bind angularjs

Diferencia entre ngBind, ngBindHtm y ngBindTemplate en Angular JS

Question

Soy nuevo en Angular JS .

¿ ngBind de ustedes me puede explicar la diferencia entre ngBind , ngBindHtm & ngBindTemplate en Angular JS con un ejemplo?

Answer 1

ng-bind

ngBind se utiliza para reemplazar el contenido de texto del elemento HTML especificado con el valor de una expresión dada. Por ejemplo, si tiene un html como sigue <b ng-bind="name"></b> y en su controlador, $scope.name = "John" un valor para el nombre como $scope.name = "John" . Esto resultará en <b>John</b> . Pero no puede usar varios valores para enlazar en un solo elemento html. Por ejemplo

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

Esto no dará el resultado ya que <b>John D</b> solo se enlaza con first_name . Así que para vincular múltiples valores podemos usar ng-bind-template

ng-bind-template

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

Esto da como resultado <b>John D</b> pero no puede representar una etiqueta html en estos dos. Para renderizar la plantilla html podemos usar ng-bind-html.

ng-bind-html

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

Esto resultará en John en lugar de mostrar <b>John</b> . Eso significa que representa el html en lugar de mostrar la etiqueta html.

Haga clic en este enlace para ver el example

Answer 2

ngBind:

El atributo ngBind le dice a Angular que reemplace el contenido de texto del elemento HTML especificado con el valor de una expresión dada, y que actualice el contenido de texto cuando el valor de esa expresión cambie.

ngBindTemplate:

La directiva ngBindTemplate especifica que el contenido del texto del elemento debe reemplazarse con la interpolación de la plantilla en el atributo ngBindTemplate. A diferencia de ngBind, la ngBindTemplate puede contener múltiples expresiones {{}}. Esta directiva es necesaria ya que algunos elementos HTML (como TÍTULO y OPCIÓN) no pueden contener elementos SPAN. ngBindTemplate solo ejecuta "cadenas"

Una simple metáfora de la diferencia:

ngBind solo ejecuta "objetos".

ngBindTemplate solo ejecuta "cadenas"