Angularjs ng-bind-html usage summary, angularjsngbind

Source: Internet
Author: User

Angularjs ng-bind-html usage summary, angularjsngbind

This article mainly explains the $ sanitize service in angular. This service depends on the ngSanitize module. (This module needs to load the angular-sanitize.js plug-in)

To learn about this service, you must first understand another command: ng-bing-html.

Random ().

However, for security reasons, if ng-bind-html is used directly, an error is returned. The content after ng-bind-html must be processed.

There are two Processing Methods: $ sce and $ sanitize. how to use the $ sce service will be explained independently in future articles. This article mainly describes the $ sanitize service.

$ Sanitize deletes a whitelist to purify html tags. Insecure content will not be returned. The whitelist is obtained based on the aHrefSanitizationWhitelist and imgSrcSanitizationWhitelist functions of $ compileProvider.

Let's look at a chestnut:

Html:

<!DOCTYPE html>

Js:

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)});

In this way, the content with html tags can be loaded in the div. The attributes of tags and events bound to elements will be retained.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.