convert - ng-bind angularjs
Diferencia entre ngBind, ngBindHtm y ngBindTemplate en Angular JS (2)
Soy nuevo en Angular JS
.
¿ ngBind
de ustedes me puede explicar la diferencia entre ngBind
, ngBindHtm
& ngBindTemplate
en Angular JS
con un ejemplo?
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
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"