如何在页面呈现一段html代码段呢?

在textarea中我们这样写:

<textarea name="" id="" cols="30" rows="" ng-model="app.someHtml"></textarea>

也可以这样写:

<div ng-bind-html="app.someHtml"></div>

在controller中大致这样写:

var app = angular.module('app',[]);

app.controller("AppCtrl", function(){
    var app = thisj;
    app.someHtml = '<a href="#">Hello</a>';
})

但,这样会报错。

如何避免呢?

--需要安装angular-sanitize

npm install angular-sanitize

controller中改成这样:

var app = angular.module('app',["ngSanitize"]);

app.controller("AppCtrl", function($sce){
    app.someHtml = $sce.trustAsHtml('<a href="#" style="color:red">Hello</a>');
})

$sce用来信任html代码段。好让类似style这种属性生效、被信任。

AngularJS中页面呈现html代码段的更多相关文章

  1. 【转】在Visual Studio中怎样快速添加代码段

    原文网址:http://blog.csdn.net/yl2isoft/article/details/9735527 以前一直只知道,键入prop,再按两次tab键,会生成自动属性代码. 今天闲着无事 ...

  2. vs中的强大的代码段管理

    vs中的代码段管理可以实现大段固定文本的快捷输入,方法: 首先编写.snippet文件如: <?xml version="1.0" encoding="utf-8& ...

  3. AngularJS中页面传参方法

    1.基于ui-router的页面跳转传参 (1) 用ui-router定义路由,比如有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的 ...

  4. 用Handler的post()方法来传递线程中的代码段到主线程中执行

    自定义的线程中是不能更新UI的,但是如果遇到更新UI的事情,我们可以用handler的post()方法来将更新UI的方法体,直接传送到主线程中,这样就能直接更新UI了.Handler的post()方法 ...

  5. VS中常用C#代码段快速输入总结

    转自:https://blog.csdn.net/a980433875/article/details/12231673 Visual Studio 中有很多代码段都可以直接简写然后按TAB快速输入编 ...

  6. 千金良方说:"我现在奉上179341字的MySQL资料包,还来得及吗?有"代码段、附录、和高清图!!"

    上一篇"上发布过"一不小心,我就上传了 279674 字的 MySQL 学习资料到 github 上了",我在更早之前,在微信公众号"老叶茶馆"上发布 ...

  7. WPF自定义RoutedEvent事件代码段

    今天在写东西的时候,发现常用的代码段里没有RoutedEvent的,因此,写了一个代码段,方便以后使用,顺便记录一下,如何做代码段. 1.在项目中新建一个XML文件,将扩展名修改为snippet. 2 ...

  8. linux进程的堆栈空间_代码段(指令,只读)、数据段(静态变量,全局变量)、堆栈段(局部变量)、栈【转】

    转自:http://blog.csdn.net/gongweijiao/article/details/8207333 原文参见:http://blog.163.com/xychenbaihu@yea ...

  9. 【转】linux代码段,数据段,BSS段, 堆,栈

    转载自 http://blog.csdn.net/wudebao5220150/article/details/12947445  linux代码段,数据段,BSS段, 堆,栈 网上摘抄了一些,自己组 ...

随机推荐

  1. dynamic web module和对应的TOMCAT 版本

    大致因为java的web系统有多种类型,比如静态的和动态的,然后动态的java web project要设置dynamic web module,也就是动态网页模型,他必须要和对应的服务器搭配好了才能 ...

  2. 目标检测--Scalable Object Detection using Deep Neural Networks(CVPR 2014)

    Scalable Object Detection using Deep Neural Networks 作者: Dumitru Erhan, Christian Szegedy, Alexander ...

  3. ValueError: total size of new array must be unchanged

    在对数据增强后的faster rcnn中进行训练时,出现这个错误,原因是在lib/roi_data_layer/layer.py中,会出现 inds = np.reshape(inds, (-1,2) ...

  4. 关于ie7下display:inline-block;不支持的解决方案。

    摘要: 声明:此文章为转载(点击查看原文),如有侵权24小时内删除.联系QQ:1522025433. 今天码的时候遇到这个问题了. 如果本身是内联元素的,把它的display属性设置设置为inline ...

  5. For each loop in Native C++

    今天发现 for each 语法居然可以直接编译通过,之前还以为只有开了/clr才可以支持.查了一下资料发现ms从vs2005就已经支持了.虽然不符合标准不过用着确实方便啊,必须记录一下. 具体看这里 ...

  6. ef 数据库连接字符串加密

    public testContext() : base(GetConnection(), true) { } public static DbConnection GetConnection() { ...

  7. springbank 开发日志 springbank是如何执行一个handler的requestMapping对应的方法的

    占位 从dispatcher说起,方法doDispatch(Map request)的参数request是一个通过解析来报报文新城的map //获取HandlerExecutionChain,其中封装 ...

  8. [转] Optimizely:在线网站A/B测试平台

    Optimizely:在线网站A/B测试平台是一家提供 A/B 测试服务的公司.A/B 测试能够对比不同版本的设计,选取更吸引用户眼球的那一款,从而带来更为优化的个人体验.让网站所有者易于对不同版本的 ...

  9. redis 持久化 AOF和 RDB 引起的生产故障

    概要       最近听开发的同事说,应用程序连接 redis 时总是抛出连接失败或超时之类的错误.通过观察在 redis 日志,发现日志中出现 "Asynchronous AOF fsyn ...

  10. KNN分类算法实现手写数字识别

    需求: 利用一个手写数字“先验数据”集,使用knn算法来实现对手写数字的自动识别: 先验数据(训练数据)集: ♦数据维度比较大,样本数比较多. ♦ 数据集包括数字0-9的手写体. ♦每个数字大约有20 ...