Angular JS中的ngBind,ngBindHtm和ngBindTemplate之间的区别

Sye*_*yed 22 angularjs ng-bind-html ng-bind

我是新手Angular JS.

你们中的任何一个可以解释我的区别ngBind,ngBindHtmngBindTemplateAngular JS用的例子吗?

Saj*_*ith 46

NG-绑定

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> 
Run Code Online (Sandbox Code Playgroud)

这不会将结果<b>John D</b> 作为绑定first_name.因此,对于绑定多个值,我们可以使用ng-bind-template

NG-绑定模板

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

<b ng-bind-template="{{first_name second_name}}"></b>
Run Code Online (Sandbox Code Playgroud)

这导致<b>John D</b> 但是你不能在这两者中渲染一个html标签.为了渲染html模板,我们可以使用ng-bind-html.

NG绑定,HTML

$scope.name = "<b>John</b>";
<div ng-bind-html="name"></div>
Run Code Online (Sandbox Code Playgroud)

这将导致约翰而不是显示<b>John</b>.这意味着它呈现html而不是显示html标记.

单击此链接可查看示例