Я новичок в Angular JS
.
Может ли кто-нибудь из вас объяснить мне разницу между ngBind
, ngBindHtm
и ngBindTemplate
в Angular JS
с примером?
Я новичок в Angular JS
.
Может ли кто-нибудь из вас объяснить мне разницу между ngBind
, ngBindHtm
и ngBindTemplate
в Angular JS
с примером?
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.
$scope.name = "<b>John</b>";
<div ng-bind-html="name"></div>
Это приведет к John, а не покажет <b>John</b>
. Это означает, что он отображает html вместо отображения тега html.
Нажмите эту ссылку, чтобы просмотреть пример
ngBind:
Атрибут ngBind сообщает Angular заменить текстовое содержимое указанного HTML-элемента на значение данного выражения и обновить текстовый контент при изменении значения этого выражения.
ngBindTemplate:
В директиве ngBindTemplate указано, что текстовое содержимое элемента должно быть заменено интерполяцией шаблона в атрибуте ngBindTemplate. В отличие от ngBind, ngBindTemplate может содержать несколько выражений {{}}. Эта директива необходима, поскольку некоторые элементы HTML (такие как TITLE и OPTION) не могут содержать элементы SPAN. ngBindTemplate запускает только "строки"
Простая метафора разницы:
ngBind запускает только "объекты".
ngBindTemplate выполняет только "строки"