Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to use the ng-bind-html instruction of angularJS". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to use the ng-bind-html instruction of angularJS" can help you solve your doubts.

One of the strengths of angularjs is its ability to bind data in both directions. The 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 by the background has a variety of html tags. Such as:

$scope.text= "hello

This is an example. "

We use instructions like ng-bind-html to bind, but it turns out it's not what we want. It goes like this:

Hello, this is an example (the b label style we set for the text is missing)

After debugging for a long time, finally lock the problem and solve the problem. But it's worth the hard work, after all, I've learned more code to figure this out.

The reason is this:

When angularJS binds data, it is output in text form by default, that is, it does not escape and accept all html tags in your data, which improves security and prevents injection attacks in html tags. But if our application scenario is similar to the article details page, when reading formatted text from the database, it does not display properly on the page. As follows:

$scope.htmlStr='

'

At this point we have to use the $sce service to solve our problem. The so-called sce is the abbreviation of "StrictContextualEscaping". Translated into Chinese, "strict context mode" can also be understood as security binding. This method converts the value to privileged acceptance and can be safely bound using "ng-bind-html".

Let's see how to use it:

Encapsulate it into a filter and you can call it on the template at any time.

/ / Register a filter and mount it to any angular.module. If there are more custom filters, you can extract a common filter module.

.filter ('to_trusted', [' $sce',function ($sce) {returnfunction (text) {return$sce.trustAsHtml (text))

}

}]); / / and then use it in the page like this

$sce is the security processing module that comes with angularJS. The $sce.trustAsHtml (input) method parses the data content in the form of html and returns it. Adding this filter to the data bound by ng-bind-html enables the automatic escape of html tags when the data is loaded.

After reading this, the article "how to use the ng-bind-html instructions of angularJS" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.