CODEWITHSUNDEEP
javascriptangularjsjsonspecial-charactersangular-translate
haakon.io
haakon.io

Reputation: 477

& in my JSON is rendered as & in Angular view?

I have a json file used to store my key/strings for localization using angular-translate. There is a string 'Profile & Preferences' that I am using in my view. When I add that string by using ng-bind-html the string is displaying as:

Profile & Preferences

I thought that ng-bind-html was supposed to convert that to an &. How do I get it to display an & instead of &? I tried changing the string value in my json to & but then it just displays as:

Profile & Preferences

Here is the tag I'm using:

<h3 ng-bind="'REGISTRATION_3.profile-preferences' | translate"></h3>

I have also tried the suggestions in With ng-bind-html-unsafe removed, how do I inject HTML? .

When I used a filter suggested in the above linked question:

  app.filter('html', ['$sce', function ($sce) { 
    return function (text) {
        return $sce.trustAsHtml(text);
    };    
}]);

I get this as a result:

Profile &amp;amp; Preferences

I have also verified that I am injecting 'ngSanitize' in my app.

Upvotes: 0

Views: 1886

Answers (1)

haakon.io
haakon.io

Reputation: 477

I figured this out, I was typing too quick and tabbed when 'ng-bind' was selected instead of 'ng-bind-html'. My mistake.

What worked was using this filter in app.js:

  app.filter('html', ['$sce', function ($sce) { 
    return function (text) {
        console.log('text is ');
        console.log(text);
        return $sce.trustAsHtml(text);
    };    
}]);

and using it in my tag like this:

<h3 ng-bind-html="'REGISTRATION_3.profile-preferences' | translate | html"></h3>

Upvotes: 1

Related Questions