Angular page titles not parsing unicode

Question

The data returned from my API is encoded. This is giving me some issues when setting the title of the page. My router sets the page title for static pages but for my dynamic "Project" pages, I'm setting the title via a controller. How can I make this output correctly?

<title ng-bind="pageTitle"></title>

Eg - My title "Tom’s app" is being output as is...whereas I want it to be "Tom's app"

I've tried a filter with $sce but this doesn't change anything.

.filter('raw', function($sce) {
    return function(input) {
        return $sce.trustAsHtml(input);
    }
})

//controller
$rootScope.title = $filter('raw')($scope.project.title);

My code:

.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl:'pages/home.html',
        data : { pageTitle: 'Home' }
    })
    .when('/portfolio/:projectId', {
        controller:'projectController',
        templateUrl:'pages/project.html',
        data : { pageTitle: 'Project' }
    })
    .when('/portfolio', {
        controller: 'portfolioController',
        templateUrl: 'pages/portfolio.html',
        data : { pageTitle: 'Portfolio' }
    })
    .when('/contact', {
        controller: 'contactController',
        templateUrl: 'pages/contact.html',
        data : { pageTitle: 'Contact' }
    })
    .otherwise({
        redirectTo:'/'
    });
})


.run(['$location', '$rootScope', function($location, $rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
        $rootScope.title = current.$$route.data.pageTitle;
    });
}])


.controller('projectTitle', function($scope, $location, $rootScope, $routeParams, $http, $sce, $filter, WPAPI) {

    $rootScope.title = $scope.project.title;

})

If you only have to handle some characters you could use an approach similar to this: http://stackoverflow.com/questions/3700326/decode-amp-back-to-in-javascript — Florian Wendelborn, Jul 15 '15 at 12:16
Perhaps this will help: http://stackoverflow.com/questions/19415394/with-ng-bind-html-unsafe-removed-how-do-i-inject-html Can't say for sure as you haven't posted your HTML. (specifically the `ng-bind-html` part) — Devin H., Jul 15 '15 at 12:22
Use one the hacks posted [here][1] to unescape HTML entities using JS. [1]: http://stackoverflow.com/questions/1912501/unescape-html-entities-in-javascript — POZ, Jul 15 '15 at 12:25

score 0 · Answer 1 · answered Jul 15 '15 at 15:04

Annoyingly, I was using ng-bind instead of ng-bind-html which is why the filter wasn't working. I've resolved this using the same filter as posted above along with:

<title ng-bind-html="pageTitle | raw"></title>

The only disadvantage to this approach is that I'm not sure I can now append a string to this. With ng-bind, I can say:

<title ng-bind="(pageTitle | raw) + 'more!!'"></title>

However, this does not work with ng-bind-html. Any suggestions?

Angular page titles not parsing unicode

1 Answers1