代码：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>angularjs嵌入html</title>

</head>

<body ng-app="app" ng-controller="MainCtrl">

<div ng-bind-html="someText"></div>

<script src="./assets/angular/angular.min.js"></script>

<script>

    angular

            .module('app', [], function () {

            })

            .controller('MainCtrl', function ($scope, $sce) {

                $scope.someText = $sce.trustAsHtml('<div style="color: red;">hello, world</div>');

            });

</script>

</body>

</html>

运行结果：

angularjs通过ng-bind-html指令和$sce服务绑定html的更多相关文章

  1. angular中的ng-bind-html指令和$sce服务

    angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model.但在我们的项目当中会遇到这样的情况,后台返回的数据中带有 ...

  2. 前端MVC学习总结（二）——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

  3. 前端MVC学习笔记（二）——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

  4. AngularJS开发指南4：指令的详解

    指令是我们用来扩展浏览器能力的技术之一.在DOM编译期间,和HTML元素关联着的指令会被检测到,并且被执行.这使得指令可以为DOM指定行为,或者改变它. AngularJS有一套完整的.可扩展的.用来 ...

  5. ng之自定义指令

    最近开始研究并使用angular,今天就来简单讲讲对于ng中自定义指令的一下使用心得吧! 相信用过ng的人都对ng中的指令有所了解,指令,我将其理解为AngularJS操作HTML element的一 ...

  6. 【AngularJS学习笔记】01 指令、服务和过滤器

    AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 比如: ng-app 指令初始化一个 AngularJS 应用程序.注意ng-app一般为空,如果值不为空,就得加这样一句代码va ...

  7. angularJS中如何写自定义指令

    指令定义 对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能 例如,ng-click可以让一个元素能够监听click事件,并在接收到事件的时候执行angularJS ...

  8. AngularJS高级程序设计读书笔记 -- 指令篇 之 内置指令

    1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 ...

  9. 【转载】AngularJS 用$sce服务来过滤HTML标签，解决无法正确显示后台传递的html标签

    angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model.但在我们的项目当中会遇到这样的情况,后台返回的数据中带有 ...

随机推荐

  1. 浅谈Linux进程管理

    一  查看系统进程 在linux中,查看系统进程的命令为ps,常用格式为如下两个: (1)ps aux:unix格式查看系统进程 (2)ps -le:linux格式查看系统进程 一般地,ps aux更 ...

  2. tomcat下配置jndi数据源c3p0

    Tomcat下通过JNDI配置数据源,使用c3p0连接池 首先在打开tomcat找到在conf文件下,找到server.xml 在server.xml文件中找到标签 在下面添加如下配置 <Res ...

  3. 规则引擎 - drools 使用讲解（简单版） - Java

    drools规则引擎 项目链接 现状: 运维同学(各种同学)通过后台管理界面直接配置相关规则,这里是通过输入框.下拉框等完成输入的,非常简单: 规则配置完毕后,前端请求后端,此时服务端根据参数(即规则 ...

  4. Mybaits-从零开始-Hello World（暂不考虑命名规范化）

    1.mybatis-config.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE ...

  5. Eureka参数配置->Server端参数

    1.基本参数 参数 默认值 说明 eureka.server.enable-self-preservation true 是否开启自我保护模式 eureka.server.renewal-percen ...

  6. Shell之操作环境

    目录 Shell之操作环境 参考 命令运行顺序 欢迎信息 环境配置 Shell之操作环境

  7. 挑战程序设计——迷宫的最短路径（BFS）

    题目详情 Description 给定一个大小为 N * M 的迷宫.迷宫由通道和墙壁组成,每一步可以向邻接的上下左右四格的通道移动.请求出从起点到终点所需的最小步数 限制条件: N,M <= ...

  8. Spring框架学习笔记（4）——SSM整合以及创建Maven自定义模版

    Spring+Spring MVC+MyBatis+Maven SSM整合的核心还是Spring+MyBatis的整合,回顾一下MyBatis操作数据库流程,我们是使用一个SQLSessionFact ...

  9. 设置Activity全屏的方法：

    1)代码隐藏ActionBar 在Activity的onCreate方法中调用getActionBar.hide();即可 2)通过requestWindowFeature设置 requestWind ...

  10. 网页布局——Box盒子

    在移动端开发的时候,圣杯布局,弹性盒,是我们经常会用得到的,W3C很久以前就有一个display:box属性 flex是最新的,但是在实际的浏览器测试中,display: flex 不能完全替代dis ...