Displaying HTML in an Angular 1.3.9 view with $sce

Question

I'm trying to display an HTML string in my Angular view.

At first, I naively tried this :

<p>{{ad.text}}</p>

$scope.ad = { 'text' : '<a href="#">Link</a>'}; // Dynamically fetched, etc. This is just an example text

But this just displays <a href="#">Link</a> in the view, not : link.

After some research, I stumbled upon ngSanitize. I tried it, but it totally strips off all HTML code to leave just raw text. Pretty secure indeed. A bit too much, actually. Anyway, ngSanitize is now outdated.

This SO post indicates that now the $sce service has to be used instead of ngSnitize.

Following these various solutions, here is what I came up with :

HTML

<p ng-bind-html="htmlAdText"></p>

JS

$scope.ad = { 'text' : '<a href="#">Link</a>'};

$scope.htmlAdText = $sce.trustAsHtml($scope.ad.text);

But this error comes in the console :

ReferenceError: $sce is not defined

What bugs me is that the $sce service is supposed to be part of Angular's core since v1.2, and I'm using v1.3.9.

What's going on here? Does anyone have a definitive method to display HTML in an AngularJS view ( without filters that just leave the raw text) ?

Answer 1

Don't forget to inject it into controller, for instance:

app.controller('mainCtrl', [ '$scope', '$sce', function($scope, $sce){
    $scope.ad = { 'text' : '<a href="#">Link</a>'};
    $scope.htmlAdText = $sce.trustAsHtml($scope.ad.text);
}]); //End Controller