zoukankan      html  css  js  c++  java
  • [AngularJS] Html ngSanitize, $sce

    Safely render arbitrary HTML snippets by using ngSanitize and $sce.

    By default angularJS consider user's input html is danger, so if you want to display html tag on the page will show unsafe error.

    To remove this error and trust user's input, we can install ngSanitize:

    bower install angular-sanitize
    var egghead = angular.module("egghead", ["ngSanitize"]);
    
    egghead.controller("AppCtrl", function () {
        var app = this;
    
        app.someHtml = '<a href="http://egghead.io" style="color:red">Learn stuff!</strong>';
    });
    <!DOCTYPE html>
    <html>
    <head>
        <title>Egghead.io</title>
        <link rel="stylesheet" href="bower_components/bootstrap.css/css/bootstrap.css"/>
    </head>
    <body ng-app="egghead" ng-controller="AppCtrl as app">
    <textarea name="" id="" cols="30" rows="10" ng-model="app.someHtml"></textarea>
    <div ng-bind-html="app.someHtml"></div>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="app.js"></script>
    </body>
    </html>

    Then the error message has gone, but we didn't get the result which we want, we want "Learn stuff" shown  in red color:

    <a href="http://egghead.io" style="color:red">Learn stuff!</strong>

    To overcome this, we can use $sce service:

    var egghead = angular.module("egghead", ["ngSanitize"]);
    
    egghead.controller("AppCtrl", function ($sce) {
        var app = this;
    
        app.someHtml = $sce.trustAsHtml('<a href="http://egghead.io" style="color:red">Learn stuff!</strong>');
    });

    Also you can trust as javascript, css && url:

    see here: https://docs.angularjs.org/api/ng/service/$sce

  • 相关阅读:
    设计模式之观察者模式
    设计模式之建造者模式
    设计模式之外观模式
    设计模式之模板方法模式
    设计模式之原型模式
    自己动手写计算器v1.1
    自己动手写计算器v1.0
    Guid的使用
    设计模式学习---代理类
    StringBuilder的使用
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4176172.html
Copyright © 2011-2022 走看看