<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.8/angular-sanitize.min.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.12.1/angular-translate.js" data-semver="2.12.1" data-require="angular-translate@2.12.1"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<h1>Variable Replacement</h1>
<h2>Translation with HTML inside of json, fails</h2>
<p>{{ 'HELLO' | translate }}</p>
<h2>Normal Implementation, works</h2>
<p>{{ 'MIN' | translate:{number: 5} }}</p>
<h2>Normal implementation with HTML string, fails</h2>
<p>{{ 'MIN' | translate:{number: "<span>5</span>"} }}</p>
<h2>Normal implementation with HTML string and sanitize, fails</h2>
<p translate="MIN" translate-value="6"></p>
</body>
</html>
// Code goes here
var app = angular.module('myApp', [
'pascalprecht.translate'
])
.config([
'$translateProvider',
function($translateProvider) {
$translateProvider.translations('en', {
"HELLO": 'Hello, <span style="color:red">Why am i not styled</span>',
"MIN": '{{number}} minutes'
});
$translateProvider.preferredLanguage('en');
// Try different values here:
$translateProvider.useSanitizeValueStrategy(null);
}
]);
app.filter('unsafe', function($sce) {
return function(val) {
return $sce.trustAsHtml(val);
};
});
/* Styles go here */