Подтвердить что ты не робот

Разница между ngBind, ngBindHtm & ngBindTemplate в Angular JS

Я новичок в Angular JS.

Может ли кто-нибудь из вас объяснить мне разницу между ngBind, ngBindHtm и ngBindTemplate в Angular JS с примером?

4b9b3361

Ответ 1

нг-привязка

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> связывает только имя_имя. Поэтому для привязки нескольких значений мы можем использовать 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.

нг-связывания-HTML

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

Это приведет к John, а не покажет <b>John</b>. Это означает, что он отображает html вместо отображения тега html.

Нажмите эту ссылку, чтобы просмотреть пример

Ответ 2

ngBind:

Атрибут ngBind сообщает Angular заменить текстовое содержимое указанного HTML-элемента на значение данного выражения и обновить текстовый контент при изменении значения этого выражения.

ngBindTemplate:

В директиве ngBindTemplate указано, что текстовое содержимое элемента должно быть заменено интерполяцией шаблона в атрибуте ngBindTemplate. В отличие от ngBind, ngBindTemplate может содержать несколько выражений {{}}. Эта директива необходима, поскольку некоторые элементы HTML (такие как TITLE и OPTION) не могут содержать элементы SPAN. ngBindTemplate запускает только "строки"

Простая метафора разницы:

ngBind запускает только "объекты".

ngBindTemplate выполняет только "строки"