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

  • 相关阅读:
    sqllite小型数据库的使用
    winform打开本地html页面
    【app】自动化必备之adb使用
    【app】自动化环境搭建(Appium)for java
    【app】Hybrid?Native?不知道你就out了!
    589. N叉树的前序遍历
    590. N叉树的后序遍历
    897. 递增顺序查找树
    559. N叉树的最大深度
    108. 将有序数组转换为二叉搜索树
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4176172.html
Copyright © 2011-2022 走看看