Deep understanding of ng-bind-html directives and $SCE services in Angularjs _angularjs

Objective

One of the Angularjs's strengths is his data-two-way binding, the cow-B feature, and the two things we'll often use are ng-bind and Ng-model for form.

However, in our project we will encounter a situation where the data returned in the background with a variety of HTML tags.

Such as:

$scope. currentwork.description = "hello,<br><b> where are we going today?" </b> "

We use ng-bind-html to bind, and the result is not what we want.

That is true

Hello,
where are we going today?

What do we do?

For the angular 1.2 version we have to use the $SCE service to solve our problems. The so-called SCE is the abbreviation of "Strict contextual escaping". Translated into Chinese is "strict context mode" can also be understood as a security binding bar.

Let's see how to use it.

Controller code:

$http. Get ('/api/work/get?workid= ' + $routeParams. WorkID). Success (function (work) {$scope. currentwork = Work;});

HTML Code:

<p> {{currentwork.description}}</p>

The content we return contains a series of HTML tags. The results appear as we said at the beginning of our article. That's when we have to tell IT security bindings. It can be done by using the $ sce.trustAsHtml() . This method converts a value to a privilege and can safely use "ng-bind-html". So, we have to introduce $SCE service into our controller.

Controller (' TransferWorkStep2 ', [' $scope ', ' $http ', ' $routeParams ', ' $sce ', function ($scope, $http, $routeParams, $sce {
$http. Get ('/api/work/get?workid= ' + $routeParams. WorkID)
. Success (function (work) {
 $ Scope.currentwork = work;
 $scope. currentwork.description = $sce. trustashtml ($rootScope. currentwork.description);
});

HTML code:

<p ng-bind-html= "Currentwork.description" ></p>

This results in a perfect presentation on the page:

Hello, 
where are we going today?

We can also use this to encapsulate it into a filter that can be invoked at any time on the template.

App.filter (' to_trusted ', [' $sce ', function ($SCE) {return
function (text) {return
 $sce. trustashtml (text);
} ;
}]);

HTML code:

<p ng-bind-html= "Currentwork.description | To_trusted "></p>

Summarize

The above is about ANGULARJS in the ng-bind-html instructions and $SCE services, all the contents of the hope for everyone's study or work to bring certain help, if there are questions can be exchanged message.