AngularJS | ng-bind-template指令

介绍

ng-bind-template是AngularJS中的一个指令，它用于绑定模板字符串到DOM元素中并显示。它类似于ng-bind指令，但是它可以支持多个表达式，它们用空格或逗号分隔，并且可以包含任意的HTML标记。

语法

<p ng-bind-template="字符串{{表达式}}字符串"></p>

示例

<div ng-bind-template="AngularJS version: {{1+1}}"></div>
<div ng-bind-template="Today is {{'2019-07-10' | date: 'fullDate'}}"></div>

解释

以上示例将会显示：

AngularJS version: 2
Today is Wednesday, July 10, 2019

第一个示例使用了一个简单的表达式1+1，它会计算出2并绑定到字符串AngularJS version:中。因此，这个元素将会显示AngularJS version: 2。

第二个示例使用了一个更复杂的表达式，它将日期格式化为Wednesday, July 10, 2019并绑定到字符串Today is 中。由于日期是一个对象，所以我们需要在管道符号(|)后跟着date过滤器，并将fullDate作为参数传入以便格式化日期。因此，这个元素将会显示Today is Wednesday, July 10, 2019。

注意事项

• 表达式的值可以是任意类型，例如：字符串、数字、布尔值、对象等等。
• 表达式可以与JavaScript表达式一样包含多个运算符和操作数。
• 需要注意的是，由于ng-bind-template指令是使用innerHTML来替换元素内容的，因此需要避免使用不受信任的字符串，以免造成XSS漏洞。如果必须使用不受信任的字符串，请使用ng-bind-html指令。

参考文献

• ngBindTemplate