Detailed explanation of the ng-bind-html directive of angularJS

This time I will bring you a detailed explanation of the ng-bind-html directive of angularJS. What are the precautions when using the ng-bind-html directive of angularJS. The following is a practical case. , let’s take a look.

One of the powerful features of angular js is its two-way data binding function. Two things we often use are ng-bind and ng-model for forms. But we will encounter such a situation in our project. The data returned by the background contains various html tags . For example:

$scope.text = “hello,<br><b> 这是一个例子</b>”

We use instructions like ng-bind-html to bind, but the result is not what we want. It's like this:
hello, this is an example (the b tag style we set for the text is lost)

After debugging for a long time, the problem was finally locked and solved. , but the hard work is still worth it, after all, I have to learn more code to figure this out.

The reason is this:

angularJS will output the text in the form of text by default when performing data binding, that is, the html tags in your data will not be processed. All escapes are accepted, which improves security and prevents injection attacks in html tags. But if our application scenario is similar to the article details page, when the formatted text is read from the database, it cannot be displayed on the page normally. As follows:

$scope.htmlStr = &#39;<p style="color:red;font-size=18px;"></p>&#39;;

At this time we must use the $sce service to solve our problem. The so-called sce is the abbreviation of "Strict Contextual Escaping". Translated into Chinese, it means "strict context mode", which can also be understood as safe binding. This method converts the value to one that is accepted by the privilege and can be safely bound using "ng-bind-html".
Let’s see how to use it:

Encapsulate it into a filterYou can call it on the template at any time

//注册一个过滤器，挂载到任意一个angular.module下，如果自定义过滤器较多，可以提取出来一个公用的过滤器module
    .filter('to_trusted', ['$sce', function ($sce) {        return function (text) {            return $sce.trustAsHtml(text);
        };
    }]);//然后在页面中这样使用<p ng-bind-html="article.text | to_trusted"></p>

$sce comes with angularJS The security processing module, $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 automatic escaping of html tags when the data is loaded.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

WEB interface management tool

What should I do if the text in the ionic application cannot be copied and pasted by long-pressing?

The above is the detailed content of Detailed explanation of the ng-bind-html directive of angularJS. For more information, please follow other related articles on the PHP Chinese website!