ng-bind-html не работает с TranslateJS

Question

Я выполняю перевод в веб-приложении с использованием angularJS и репозитория с именем angular-translate, найденного в https://angular -translate.github.io / . Согласно документации, я мог бы использовать этот репозиторий, чтобы установить текст для данного элемента в HTML. Я хотел показать всплывающее окно с сообщением на случай, если пользователь не заполнил некоторые текстовые поля. Например: если я не заполнил «имя» и «адрес», на экране появилось бы всплывающее окно: «Пожалуйста, заполните следующие поля: имя, адрес». Однако использование ng-bind-html не показывает желаемые результаты.

Следующие попытки не работают должным образом:

//Var1:'Name is not valid'
//Var2:'Invalid address'
dialog.msg = '<div translate>Var1</div><div translate>Var2</div>';
$scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(dialog.msg);
$rootScope.showNotificationDialog('error', 'Atenção', dialog.msg);

//showNotificationDialog
<div class="text" ng-bind-html="dialog.msg"></div>
//Result: Var1
          Var2
<div class="text">{{dialog.msg}}</div>

//Result: <div translate>Var1</div><div translate>Var2</div>

Я хочу, чтобы результат был:

Имя недействительно Неверный адрес

Как мне этого добиться?

Answer 1

Для тех, кто сталкивался с подобными проблемами, разделите строку и используйте ng-repeat, чтобы просто передать переменные

<div ng-repeat="msg in dialog.msg">
        <div translate>{{msg}}</div>
    </div>