ошибка ng-bind-html для выражений составных переменных

#angularjs #typescript

Вопрос:

Я пишу интерфейс angular с помощью 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?

1. Вы получаете «пустое пространство», а не какую-либо ошибку, это означает, что директива работает нормально. Кроме того, код мне тоже кажется нормальным. Поэтому сначала нужно убедиться, что это не ошибка в вашем notification.getTranslationKey() коде. Если он возвращает пустое пространство, или если он возвращается нормально, но заканчивается как пустое пространство после прохождения по трубам, тогда вы спрашиваете о неправильной вещи. Пожалуйста, сначала подтвердите это.

2. Ну, это работает, когда я удаляю ng-bind-html, предложение отображается, но мне нужно использовать ng-bind-html для отображения апострофа (я использую ‘ и мне нужно привязать html, потому что фраза находится в rfs-компоненте), поэтому проблем с уведомлением нет.getTranslationKey(), он просто не работает в сочетании с ng-bind-html

Ответ №1:

Для доступа к фильтрам в контроллере можно использовать службу $filter:

 $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>

Затем можно использовать стандартные методы отладки для диагностики проблем.