angularjs中的单向HTML绑定

One way HTML binding in angularjs

本文关键字：HTML 绑定 angularjs      更新时间：2023-09-26

我曾经使用ng-bind（或简写｛｛｝｝）将一些文本绑定到跨度中。

<p>Preview: <span>formattedPrice(price)</span></p>

正如您所看到的，我在绑定时有一个函数调用formattedPrice。现在我意识到我应该能够在这个跨度中添加一些HTML。我试过ng-bind-html="formattedPrice(price)"，但似乎没有成功。

有没有一种方法可以在不创建另一个范围变量的情况下做到这一点？

您应该使用过滤器。

像这样：

<p>Preview: <span>{{price | formatted}}</span></p>

示例过滤器：

angular.module('myFilters', []).filter('formatted', function() {
  return function(input) {
    //return your formatted price here
  }
}

确保您的应用程序加载ngSanitize模块：

angular.module('app', ['ngSanitize'])

在HTML上（示例）：

<script src="<PATH_TO>/angular-sanitize.js"></script>

如果没有这个模块，Angular将无法正确解析您想要呈现的HTML。

演示

相关文章：