Summary of the usage of Angularjs ng-bind-html

$sanitize Services in the angular.

This service relies on the ngsanitize module. (This module needs to load the Angular-sanitize.js plugin)

To learn this service, you need to know another directive: ng-bing-html.

As the name implies, the difference between ng-bind-html and Ng-bind is that Ng-bind binds the value as a string, and the contents of the element, but ng-bind-html binds the value as HTML, and the element's HTML. Equivalent to the. Text () in JQ. and. HTML ().

However, for security reasons, if we use ng-bind-html directly will be error, ng-bind-html after the content must be processed.

There are two ways to handle this, one is to use the $SCE service, and the other is to use the $sanitize service. $sce Service How to use, in the future article will be independently explained, this article mainly explains $sanitize service.

$sanitize will cleanse the HTML tag by eradicating a whitelist. This way, unsafe content is not returned. The whitelist is based on $compileprovider's ahrefsanitizationwhitelist and imgsrcsanitizationwhitelist functions.

Like what

var app =angular.module (' myApp ', [' ngsanitize ']); App.controller (' Ctrl ', function ($scope, $sce) {    $scope. myhtml = ' <p style= "Color:blue" >an html\n ' +    ' <em onclick= "this.textcontent=\ ' code_bunny\ '" >click here</em >\n ' +    ' snippet</p> ';    $scope. trusthtml = $sce. trustashtml ($scope. myhtml)});

Summary of the usage of Angularjs ng-bind-html