Use of ng-bind-html

Source: Internet
Author: User

ANGUALRJS provides instruction ng-bind-html for binding documents that contain HTML tags, using the following methods:

< any   ng-bind-html ="" > ... </  any >

Test Case:

Index.html

<ng-controller= "Testctrl">            <Div  >                <ng-bind-html= "myhtml"></p  >            </div></ Div  >

Index.js

var myApp = angular.module (' MyApp ', []); Myapp.controller (function($scope) {        = ' <strong>Hot</strong> ';}]);

The browser output has the following error:

angular.js:11598 Error: [$SCE: unsafe] Attempting to use an unsafe value in a safe context.http://errors.angularjs.org/1.3. 11/$sce/unsafe at File:///home/y/my_temp/angular_test/web/app/js/angular.js:63:12 at Htmlsanitizer (file:///home/y/ MY_TEMP/ANGULAR_TEST/WEB/APP/JS/ANGULAR.JS:15053:13) at gettrusted (file:///home/y/my_temp/angular_test/web/app/ js/angular.js:15217:16) at Object.sce. (anonymous function) [As gettrustedhtml] (file:///home/y/my_temp/angular_test/web/app/js/angular.js:15897:16) at object.ngbindhtmlwatchaction [as FN] (file :///home/y/my_temp/angular_test/web/app/js/angular.js:20449:29) at Scope. $digest (File:///home/y/my_temp/angular_ test/web/app/js/angular.js:14230:29) at Scope. $apply (file:///home/y/my_temp/angular_test/web/app/js/angular.js : 14493:24) at Bootstrapapply (file:///home/y/my_temp/angular_test/web/app/js/angular.js:1449:15) at Object.invoke (f ILE:///HOME/Y/MY_TEMP/ANGULAR_TEST/WEB/APP/JS/ANGULAR.JS:4182:17) at Dobootstrap (file:/HOME/Y/MY_TEMP/ANGULAR_TEST/WEB/APP/JS/ANGULAR.JS:1447:14) angular.js:11598 (anonymous function) angular.js:8548 (anonymous function)

To access official documents: $sanitize Services

Note:if a $sanitize service is unavailable and the bound value isn ' t explicitly trusted, you'll have a exception (inst EAD of an exploit.)

Configure the Sanitize service in Angular.module:

var MyApp = angular.module (' myApp ', [' ngsanitize ']);

Refresh the browser again to output the following error message:

 Uncaught Error: [$injector: Modulerr] Failed to instantiate module MYAPP due to:error: [$injector: Modulerr] Failed to Inst Antiate module Ngsanitize due to:error: [$injector: Nomod] module ' ngsanitize ' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that specify the dependencies as the second argument.http://errors.angularjs.org/1.3.11 /$injector/nomod?p0=ngsanitize at File:///home/y/my_temp/angular_test/web/app/js/angular.js:63:12 at file:///home/ Y/my_temp/angular_test/web/app/js/angular.js:1764:17 at ensure (file:///home/y/my_temp/angular_test/web/app/js/ angular.js:1688:38) at module (file:///home/y/my_temp/angular_test/web/app/js/angular.js:1762:14) at file:///home/y /my_temp/angular_test/web/app/js/angular.js:4094:22 at ForEach (file:///home/y/my_temp/angular_test/web/app/js/ ANGULAR.JS:323:20) at Loadmodules (File:///home/y/my_temp/angular_test/web/app/js/angular.js:4078:5) at File:///hom E/y/my_temP/angular_test/web/app/js/angular.js:4095:40 at ForEach (File:///home/y/my_temp/angular_test/web/app/js/angu 

Discover that Angular.js does not have a sanitize module, where it will

Angular-sanitize.js load it in.
<src= ".. /js/angular-sanitize.js "></script>

Use of ng-bind-html

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.