`

AngularJs 绑定html数据 ng-bind-html

阅读更多

1、内部域直接信任

<div ng-bind-html="preview_data.preview.embed.htmlSafe"></div>

 

 

myApp.controller('myCtrl', ['$scope', '$sce', function($scope, $sce) {
  $scope.preview_data.preview.embed.htmlSafe = 
     $sce.trustAsHtml(preview_data.preview.embed.html);
}

 

 

2、内部域信任函数

 

<div ng-bind-html="to_trusted(preview_data.preview.embed.html)"></div>

 

 

 

$scope.to_trusted = function(html_code) {
    return $sce.trustAsHtml(html_code);
}

 

 

3、信任过滤器

 

<div ng-bind-html="preview_data.preview.embed.html | to_trusted"></div>

 

 

 

angular.module('myApp')
    .filter('to_trusted', ['$sce', function($sce){
        return function(text) {
            return $sce.trustAsHtml(text);
        };
    }]);

 

 

分享到:
评论

相关推荐

    深入理解AngularJS中的ng-bind-html指令

    ng-bind-html和ng-bind的区别就是,ng-bind把值作为字符串,和元素的内容进行绑定,但是ng-bind-html把值作为html,和元素的html进行绑定.相当于jq里面的.text()和.html()。这篇文章主要给大家深入的介绍了AngularJS中ng...

    angularjs中ng-bind-html的用法总结

    顾名思义,ng-bind-html和ng-bind的区别就是,ng-bind把值作为字符串,和元素的内容进行绑定,但是ng-bind-html把值作为html,和元素的html进行绑定.相当于jq里面的.text()和.html(). 但是,出于安全考虑,如果我们直接使用...

    Angular中ng-bind和ng-model的区别实例详解

    AngularJS的数据绑定有ng-bind和ng-model,一般用于如下: &lt;input ng-model=”object.xxx”&gt; &lt;span ng-bind=”object.xxx”&gt; ng-bind是单向绑定,由作用于$scope到view层,且在HTML控件(HTML控件有:input、...

    ANGULARJS中用NG-BIND指令实现单向绑定的例子

    主要介绍了ANGULARJS中用NG-BIND指令实现单向绑定的例子,本文简单介绍AngularJS框架后,用一个实例演示{{}}插值法和ng-bind指令的使用,需要的朋友可以参考下

    AngularJS ng-bind-template 指令详解

    AngularJS ng-bind-template 指令 AngularJS 实例 &lt;p&gt; 元素上绑定两个表达式: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; [removed][removed] &lt;/head&gt; &lt;body&gt; &lt;...

    深入理解AngularJS中的ng-bind-html指令和$sce服务

    我们用ng-bind-html这样的指令来绑定,结果却不是我们想要的。 是这样的 hello, 今天我们去哪里? 怎么办呢? 对于angular 1.2一下的版本我们必须要使用$sce这个服务来解决我们的问题。所谓sce即“Stri

    AngularJS ng-bind-html 指令详解及实例代码

    AngularJS ng-bind-html 指令 AngularJS 实例 绑定 &lt;p&gt; 内的 innerHTML 到变量 myText: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; [removed][removed] [removed]&lt;

    深入浅析AngularJs模版与v-bind

    v-bind与{{}}都可以对数据进行绑定,但是二者有区别的,v-bind不好,为什么说v-bind不好是因为v-bin做了完全替换的错做,如果你想做字符串的拼接那么v-bind不是很好的选择,下面看例子。 代码段来喽 比如我们有个...

    AngularJS ng-bind 指令简单实现

    AngularJS ng-bind 指令 AngularJS 实例 绑定 &lt;p&gt; 内的 innerHTML 到变量 myText: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=utf-8&gt; [removed][removed] &lt;/head&gt; &lt;body&gt; ...

    AngularJS 中文API参考手册

    ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据,并移除 HTML 字符串中危险字符 ng-bind-template 规定要使用模板替换的文本内容 ng-blur 规定 blur 事件的行为 ng-change 规定在内容改变时要执行的...

    angularJS1.4.0版

    AngularJS 是一个 JavaScript 框架。它可通过 &lt;script&gt; 标签添加到 HTML 页面。 AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。...ng-bind 指令把应用程序数据绑定到 HTML 视图。

    angularJs Demo

    03-ng-bind.html 04-$scope中的$apply方法.html 05-$scope中的$watch方法.html 06-购物车练习.html 07-模块.html 08-$provide.provider自定义服务.html 09-$provide.factory、service方法.html 10-多个控制器...

    AngularJS通过$sce输出html的方法

    AngularJS的强大之处之一就是他的数据双向绑定功能—–&gt;ng-bind和针对form的ng-model 但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各样的html标签 AngularJS输出html的时候,浏览器并不解析这些...

    AngularJS:AngularJS练习

    AngularJS AngularJS使用指令扩展HTML属性,并使用表达式将数据绑定到HTML。 Angular JS为您提供了丰富的API集,以定义这些模块,并通过依赖注入将它们链接在... ng-bind-将模型绑定到视图ng-init指令初始化AngularJS应

    Angularjs在初始化未完毕时出现闪烁问题的解决方法分析

    使用ng-cloak指令,在绑定数据的区域使用该指令并设置该指令的样式为隐藏即可,如下所示: Html: &lt;body ng-controller="QuberController" ng-cloak class="ng-cloak"&gt; Css: .ng-cloak { display: none; }...

    AngularJS打开页面隐藏显示表达式用法示例

    本文实例讲述了AngularJS打开页面隐藏显示表达式用法。分享给大家供大家参考...2.使用ng-bind, 代替{{}} 这个不太方便,因为使用ng-bind后必须要一个DOM节点绑定, 例如span上, 没有直接{{}} 用不需要DOM节点方便 3.使用

    AngularJS1.X学习笔记2-数据绑定详解

    1、ng-bind &lt;!DOCTYPE html&gt; &lt;html lang="en" ng-app="myApp"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;databinding1&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1 ng-control

    angular-once, AngularJS的一次绑定.zip

    angular-once, AngularJS的一次绑定 的角度一次AngularJS的一次绑定。为什么?arraylist是一个很好的框架,但是它用来显示大量数据,因为它...当通过 {{ }} 或者 ng-bind 指令绑定数据时,Angular 将在每次执行 Angular

Global site tag (gtag.js) - Google Analytics