I have been working on implementing translation in a web application using angularJS and the angular-translate repository, which can be found at . As per the documentation, it is possible to use this repository to set text for a specific element in the HTML. I needed to display a popup message if certain text fields were left blank by the user. For instance, if the "name" and "address" fields were empty, the popup should say: "Please fill the following fields: name, address". Unfortunately, using ng-bind-html did not give me the desired results.
My attempts so far have not worked as expected:
//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', 'Attention', 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>
What I want to achieve is:
Name is not valid Invalid address
How can I make this happen?