Preface
One of the power of Angularjs is its powerful data bidirectional binding feature. Two things we often use are ng-bind and ng-model for form.
But in our project, we will encounter this situation, the data returned in the background contains various html tags.
like:
$scope.currentWork.description = "hello,<br><b>Where are we going today?</b>"
We use instructions like ng-bind-html to bind, but the result is not what we want.
That's it
hello, where are we going today?
What to do?
For the angular version 1.2, we must use the $sce service to solve our problem. The so-called sce is the abbreviation of "Strict Contextual Escaping". Translated into Chinese is "strict context mode" and can also be understood as safe binding.
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 are shown as we said at the beginning of the article. At this time we must tell it to bind safely. It can be done by using $ sce.trustAsHtml() . This method converts the value to privileged acceptance and uses "ng-bind-html" safely. So, we have to introduce $sce service in 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 result is perfectly presented on the page:
hello Where are we going today?
We can also use it like this, encapsulate it into a filter and call it on the template at any time.
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 all about the ng-bind-html directive and $sce service in AngularJS. I hope it will help you study or work. If you have any questions, you can leave a message to communicate.