I am writing an angular front end with Typescript. I need to bind html for correct rendering. I use ng-bind-html for this purpose.

It works fine with simple variables like

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

Correct text is rendered in the app.

But now I have a very complex variable

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

I tried different ways of using ng-bind-html with this expression but it is not working. I get just empty space instead of my text.

How to use ng-bind-html with such complex expressions? Are there alternatives to this approach? May be it is possible to bind html in controller instead of html?

1 Answers

georgeawg On

One can use the $filter service to access filters in the controller:

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


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

Then one can use standard debugging techniques to diagnose problems.