{"id":13193,"date":"2014-04-27T22:07:32","date_gmt":"2014-04-27T16:37:32","guid":{"rendered":"https:\/\/2thenew.xyz\/blog\/?p=13193"},"modified":"2017-08-03T13:46:39","modified_gmt":"2017-08-03T08:16:39","slug":"sce-in-angular","status":"publish","type":"post","link":"https:\/\/2thenew.xyz\/blog\/sce-in-angular\/","title":{"rendered":"$sce in angular"},"content":{"rendered":"

In my Angular project<\/a>, I came across a situation where i had to render some html markup, but the tricky thing was, the markup was contained in some angular scope variable. And when outputting it, it just printed out the html markup as basic text.<\/p>\n

A quick Google search informed me about the directive ng-bind-html<\/strong> and ng-bind-html-unsafe<\/strong>, but the markup would still not render.<\/p>\n

The problem was that, from Angular 1.2, in order to allow us to use ng-bind-html, we have to use an angular provided service “$sce”<\/strong>, which surely solved my problem.<\/p>\n

“Strict Contextual Escaping”<\/strong> abbreviated as “sce” is a service of angular, which helps us to safely bind the values in our angular application. One such example can be of HTML binding. Lets consider example from my project:<\/p>\n

Controller code (controller.js):<\/p>\n

[js]
\n$http.get(‘\/api\/work\/get?workId=’ + $routeParams.workId).success(function (work) {
\n $scope.currentWork = work;
\n });
\n[\/js]<\/p>\n

Html code:<\/p>\n

<p> {{currentWork.description}}<\/p> <\/code><\/p>\n

Here, “currentWork.description” may contain some html markup like: <b>this is demo description<\/b><br\/> and this is new line<\/code>.<\/p>\n

Now when the html page is rendered, it displays description content as it is: <b>this is demo description<\/b><br\/> and this is new line<\/code>.<\/p>\n

To execute this and render it as html, we have to tell angular that its secure to bind this. It can be done using $sce.trustAsHtml()<\/strong>. This method converts the value to privileged one that is accepted and rendered safely by using “ng-bind-html”.<\/p>\n

We have to pass “$sce” service to our controller:<\/p>\n

[js]
\ncontroller(‘transferWorkStep2’, [‘$scope’,’$http’,’$routeParams’,’$sce’, function ($scope,$http, $routeParams, $sce) {
\n $http.get(‘\/api\/work\/get?workId=’ + $routeParams.workId).success(function (work) {
\n $scope.currentWork = work;
\n $scope.currentWork.description = $sce.trustAsHtml($rootScope.currentWork.description);
\n });
\n[\/js]<\/p>\n

Html code:
\n<p ng-bind-html=\"currentWork.description\"><\/p><\/code><\/p>\n

It will display :
\nthis is demo description<\/strong>
\nand this is new line
\n<\/code><\/p>\n

So, this is how we can use “$sce” to make scope values content trusted.<\/p>\n","protected":false},"excerpt":{"rendered":"

In my Angular project, I came across a situation where i had to render some html markup, but the tricky thing was, the markup was contained in some angular scope variable. And when outputting it, it just printed out the html markup as basic text. A quick Google search informed me about the directive ng-bind-html […]<\/p>\n","protected":false},"author":65,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":24,"footnotes":""},"categories":[1],"tags":[1406,1408,3180,3955,1186,955,4697,1407],"class_list":["post-13193","post","type-post","status-publish","format-standard","hentry","category-technology","tag-sce","tag-sce-trustashtml","tag-angular-2","tag-angular-development","tag-angular-js","tag-angularjs","tag-angularjs-development-company","tag-ng-bind-html"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t