2017-07-08 2 views
1

Lorsque j'essaie d'envoyer html en tant que paramètre dans translate decorator mon code html est affiché en texte et non en html. Comme dans le code sous:Envoi de html en tant que paramètre dans translate decorator dans angularjs

<!doctype html> 
<html ng-app="myApp"> 
    <head> 
<script src="https://cdn.rawgit.com/SlexAxton/messageformat.js/v1.0.2/messageformat.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-cookies.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-sanitize.js"></script> 
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.15.2/angular-translate.js"></script> 
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-interpolation-messageformat/2.15.2/angular-translate-interpolation-messageformat.js"></script> 
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-storage-cookie/2.15.2/angular-translate-storage-cookie.js"></script> 
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-storage-local/2.15.2/angular-translate-storage-local.js"></script> 
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-loader-url/2.15.2/angular-translate-loader-url.js"></script> 
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-loader-static-files/2.15.2/angular-translate-loader-static-files.js"></script> 
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-handler-log/2.15.2/angular-translate-handler-log.js"></script> 
<script src="script.js"></script> 
</head> 
    <body> 

<div ng-controller="Ctrl"> 
    <p>{{ 'HEADLINE' | translate }}</p> 
    <p>{{ 'PARAGRAPH' | translate }}</p> 
</div> 


    </body> 

var translations = { 
    HEADLINE: 'What an awesome module!', 
    PARAGRAPH: 'This is cool link <a href="http://google.com">test</a> Check it out!' 
}; 

var app = angular.module('myApp', ['pascalprecht.translate']); 

app.config(['$translateProvider', function ($translateProvider) { 
    // add translation table 
    $translateProvider.translations('en', translations); 
    $translateProvider.preferredLanguage('en'); 
}]); 

app.controller('Ctrl', ['$scope', function ($scope) { 

}]); 

En conséquence, je reçois:

This is cool link <a href="http://google.com">test</a> Check it out! 

code html elle-même dans le navigateur au lieu de représentation HTML d'ancrage. Je souhaite que l'ancre soit traitée comme une balise html.

Quelqu'un a une suggestion?

+0

remplacer avec > –

Répondre

0

Afin de traiter réellement le code HTML au lieu de le sortir en tant que caractères, vous pouvez utiliser la directive ng-bind-html. Dans votre cas, il ressemblera à ceci:

<p ng-bind-html="'PARAGRAPH' | translate"></p> 
+0

directive ng-bind-html résolu mon problème! Je vous remercie. – Michael2000

+0

@ Michael2000 Pas de problème. N'oublie pas d'accepter ma réponse. –