xjinza
4/24/2018 - 8:24 AM

Angular Translate HTML tags #angularjs

Angular Translate HTML tags #angularjs 翻译

angular translate 绑定html标签 
en.json
~~~json
{
    "Already joined JollyChic? Open Now": "Already joined JollyChic? <b>Open Now<b>",
    "You can log in to JollyChic with ${code}${phone}.": "You can log in to JollyChic with {{code}}{{phone}}.",
    "Resend after ${seconds} sec": "Resend after {{seconds}} sec", //key中变量不能用{{}}会报错
    "By clicking the Get Your Reward button, you agree to our User Agreement and will register at JollyChic": "By clicking the Get Your Reward button, you agree to our <b>User Agreement</b> and will register at JollyChic"
}
~~~

app.filter("htmlSafe", ['$sce', function($sce) {
    return function(htmlCode){
        return $sce.trustAsHtml(htmlCode);
    };
}]);

//then to output it
<span data-ng-bind-html="'Already joined JollyChic? Open Now' | translate | htmlSafe"></span>
angular translate 绑定常量、变量

~~~html
{{ 'TRANSLATION_ID' | translate:'{ username: "PascalPrecht" }' }}
{{ 'TRANSLATION_ID' | translate:translationData }} //绑定变量,直接写在html里面不行,比如{{ 'TRANSLATION_ID' | translate:'{ username: username }' }} 就取不到值。
~~~

~~~javascript	
angular.module('myApp').controller('Ctrl', ['$scope', function ($scope) {
 
  $scope.translationData = {
    username: 'PascalPrecht'
  };
}]);
~~~
参考:https://angular-translate.github.io/docs/#/guide/06_variable-replacement