ng-bind-html 不会一次连接不同的东西（即使是 $sce.trustAsHtml() ）

Question

我正在尝试使用 ng-bind-html 将一些不同的 html 代码连接到我的视图。

我已经添加了ngSanitize

首先我使用 ng-for by ui-select-choices

<ui-select-choices repeat="test in dataTest>

。我想将 test.name 与一些 Html

绑定

<small> ( {{ TEST_BTN | translate }}) </small>

Test_BTN 用于翻译目的，因此我不能将其从代码中删除。

当我尝试在 ng-bind-html 中全部使用它们时，什么也不会显示

当我尝试在 ng-bind 中全部使用它们时，将显示 html 代码。

当我尝试单独使用 ng-bind 和 ng-bind-html 时，ng-bind-html html 不会显示。

我该如何解决这个问题？

编辑：我正在尝试用 ng-if

在新的 div 中显示结果

类似于：<div data-ng-if="test.isSomething" ng-bind="test.name" ng-bind-html="' <small>({{'BTN_ADD' | translate}})</small>'" ></div>（不显示 ng-bind-html 部分）

编辑 2：

我从 data-ng-bind-html 中删除了 {{ }} 并在我的控制器中使用 $translate 服务明确地使用翻译。

它奏效了。

Answer 1

不能在同一元素上使用 ng-bind 和 ng-bind-html，也不能在其中任何一个元素上使用 {{}}。没有必要在 ng-bind-html 中连接 <small> 标签，它应该在模板本身中。你的 ng-bind-html 子句中有一些语法错误嵌套引号问题。

根据您的描述，我不清楚您实际打算使用 test.name、TEST_BTN 或 BTN_ADD 中的哪一个；我假设你真的想要 test.name 在这里，但如果其他变量之一包含你试图嵌入的 HTML，只需用它的名字代替 test.name:

<div ng-if="test.isSomething">
  <small ng-bind-html="test.name | translate"></small>
</div>

ng-bind-html 不会一次连接不同的东西（即使是 $sce.trustAsHtml() ）

ng-bind-html doesn't connect different things in once (not even with $sce.trustAsHtml() )

html

javascript

angularjs

angular-ui-bootstrap

ui-select