angularjs - Angular JS 中 ngBind、ngBindHtm 和 ngBindTemplate 之间的区别

Question

我是新手Angular JS。

你们中的任何人都可以用一个例子解释一下ngBind, ngBindHtm& ngBindTemplatein之间的区别吗？Angular JS

Answer 1

ng-绑定

ngBind 用于将指定 HTML 元素的文本内容替换为给定表达式的值。例如，如果你有一个如下的 html<b ng-bind="name"></b>并且在你的控制器中为 name 赋值为$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> 只绑定 first_name。因此，对于绑定多个值，我们可以使用ng-bind-template

ng-绑定模板

 $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。

ng-绑定-html

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

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

点击此链接查看示例

Answer 2

绑定：

ngBind 属性告诉 Angular 将指定 HTML 元素的文本内容替换为给定表达式的值，并在该表达式的值更改时更新文本内容。

ngBindTemplate：

ngBindTemplate 指令指定元素文本内容应替换为 ngBindTemplate 属性中的模板插值。与 ngBind 不同，ngBindTemplate 可以包含多个 {{ }} 表达式。由于某些 HTML 元素（例如 TITLE 和 OPTION）不能包含 SPAN 元素，因此需要该指令。ngBindTemplate 只运行“字符串”

区别的一个简单比喻：

ngBind只运行“对象”。

ngBindTemplate只运行“字符串”