When angularJS is data in data binding, it defaults to the data in string form, that is, it does not escape the html tags in your data and accepts them all. This improves security and prevents the injection attack of html tags. However, sometimes it is necessary, especially when reading formatted text from the database, it cannot be displayed normally on the page.
To escape html, you need to use the ng-bind-html attribute in the data-bound html tag. This attribute depends on $sanitize, that is, you need to introduce a file and inject the service ngSanitize when the module is defined. for example:
html:
<span ng-controller = "myCtr" ng-bind-html = "htmlStr"></span>
javascript:
function myCtr($scope){
$ = '<p style="color:white;background:#f60;"></p>';
};
This can implement html escape, but there is a problem that the tags like style will be considered unsafe by angularJS, so they are automatically filtered out. In order to retain these, non-safe mode needs to be turned on.
How to make automatically loaded data escape html tags? In fact, there is another binding method:
html：
<div ng-repeat = "article in articles">
<div class="panel-heading">
<h4><b>{{}}</b></h4>
</div>
<div class="panel-body">
<article ng-bind-html=" | trustHtml">
</article>
</div>
</div>
javascript:
success(function(data){
$ = data;
});
('trustHtml',function($sce){
return function(input){
return $(input);
}
});
Among them, $sce is a security processing module that comes with angularJS. The $(input) method is to parse the data content in the form of html and return it. Adding this filter to the data bound to ng-bind-html implements automatic escape of html tags when data is loaded.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.