Difference between ngBind, ngBindHtm & ngBindTemplate in Angular JS [closed]

混江龙づ霸主 提交于 2019-11-27 13:07:09

问题


I'm new to Angular JS.

Can any one of you guys explain me the difference between ngBind,ngBindHtm & ngBindTemplate in Angular JS with an example?


回答1:


ng-bind

ngBind is used to replace the text content of the specified HTML element with the value of a given expression. For example if you have an html as follows <b ng-bind="name"></b> and in your controller give a value for name as $scope.name = "John". This will result in <b>John</b>. But you can't use multiple values to bind in a single html element. For example

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

This will not give the result as <b>John D</b> only bind first_name. So for binding multiple values we can use ng-bind-template

ng-bind-template

 $scope.first_name = "John";
 $scope.second_name = "D";

<b ng-bind-template="{{first_name second_name}}"></b>

This results in <b>John D</b> But you can't render an html tag in this both. For rendering html template we can use ng-bind-html.

ng-bind-html

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

This will result in John instead of showing <b>John</b> . That means it renders the html instead of showing html tag.

Click this link to view example




回答2:


ngBind :

The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.

ngBindTemplate :

The ngBindTemplate directive specifies that the element text content should be replaced with the interpolation of the template in the ngBindTemplate attribute. Unlike ngBind, the ngBindTemplate can contain multiple {{ }} expressions. This directive is needed since some HTML elements (such as TITLE and OPTION) cannot contain SPAN elements. ngBindTemplate only runs "strings"

A simple metaphor for the difference:

ngBind only runs "objects".

ngBindTemplate only runs "strings"



来源:https://stackoverflow.com/questions/21084008/difference-between-ngbind-ngbindhtm-ngbindtemplate-in-angular-js

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!