ng-bind-html 对复合变量表达式失败答案

【问题标题】：ng-bind-html is failing for compound variable expressionsng-bind-html 对复合变量表达式失败
【发布时间】：2019-04-14 03:44:56
【问题描述】：

我正在用 Typescript 编写一个有角度的前端。我需要绑定 html 才能正确渲染。为此，我使用 ng-bind-html。

它适用于简单的变量，如

 <span ng-bind-html='property'></span>

在应用中呈现正确的文本。

但是现在我有一个非常复杂的变量

{{notification.getTranslationKey() | translationNamespace:parentctl.getTranslationNamespace() | translate}}

我尝试了不同的方式来使用 ng-bind-html 和这个表达式，但它不起作用。我得到的只是空白空间而不是我的文本。

如何在如此复杂的表达式中使用 ng-bind-html？这种方法有替代方案吗？是否可以在控制器中绑定html而不是html？

【问题讨论】：

你得到“空白空间”，没有任何错误，这意味着指令工作正常。另外，代码对我来说似乎也不错。所以首先需要确保它不是您的notification.getTranslationKey() 代码中的错误。如果它返回空白空间，或者如果它返回正常但通过管道后最终成为空白空间，那么你问错了。请先确认。
好吧，当我删除 ng-bind-html 时它可以工作，句子被渲染，但我需要使用 ng-bind-html 来渲染撇号（我使用 ' 我需要绑定 html 因为该短语位于 rfs 组件中），因此 notification.getTranslationKey() 没有问题，它只是无法与 ng-bind-html 结合使用

标签： angularjs typescript

【解决方案1】：

可以使用$filter service 访问控制器中的过滤器：

$scope.myFunc = function() {
     var p1 = $scope.notification.getTranslationKey();
     var arg1 = $scope.parentctl.getTranslationNamespace();
     var p2 = $filter("translationNamespace", p1, arg1);
     var p3 = $filter("translate", p2);
     console.log(p3)
     return p3;
});

用法

<span ng-bind-html='myFunc()'></span>

然后可以使用标准调试技术来诊断问题。

【讨论】：

非常感谢我明天试试