代码：

<!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. meta标签设置（移动端）

    一.首先出结论:移动端meta标签一般设置为: <meta content="width=device-width,initial-scale=1.0,maxinmum-scale=1 ...

  2. Git项目分支分配

    主要分支包含master分支与develop分支,临时分支可以分为: release: 从develop分出 ,是最终要发布的版本. feature: 实现某功能时推荐新建分支,从develop分出. ...

  3. jedis 2.9版本部分属性变更

    1.控制一个pool可分配多少个jedis实例 “maxActive” -> “maxTotal” 2.最大建立连接等待时间.如果超过此时间将接到异常.设为-1表示无限制. “maxWait” ...

  4. 【SQL server基础】SQL存储过程和函数的区别

    本质上没区别.只是函数有如:只能返回一个变量的限制.而存储过程可以返回多个.而函数是可以嵌入在sql中使用的,可以在select中调用,而存储过程不行.执行的本质都一样.      函数限制比较多,比 ...

  5. 非对称加密openssl协议在php7实践

    据网上资料,RSA加密算法是一种非对称加密算法.在公开密钥加密和电子商务中RSA被广泛使用.RSA是1977年由罗纳德·李维斯特(RON RIVEST).阿迪·萨莫尔(ADI SHAMIR)和伦纳德· ...

  6. 在创建activiti5..22所需的25张表时 ，所用的方法和遇到的问题。

    最近在学习关于activiti流程设计的相关内容,首先第一步就需要了解25张activiti相关的表,具体的每张表的含义 请自行百度. 这里讲一下 用java代码生成所需要的25张表,很简单: pub ...

  7. 利用Code::Blocks搭建64位C++开发平台

    0.前言 随着64位计算机的普及,编写64位程序成为程序员基本的要求.我在<体验Code::Blocks下的C++编程>中描述了利用Code::Blocks官方提供的封装了编译器的安装包( ...

  8. 使用java的循环单向链表解决约瑟夫问题

    什么是约瑟夫问题 据说著名犹太历史学家 Josephus有过以下的故事:在罗马人占领乔塔帕特后,39 个犹太人与Josephus及他的朋友躲到一个洞中,39个犹太人决定宁愿死也不要被敌人抓到,于是决定 ...

  9. [Note] 解决使用Workerman和apache创建wss服务时出现的 Error during WebSocket handshake: net::ERR_RESPONSE_HEADERS_TRUNCATED

    使用apache代理生成的wss服务常出现 Error during WebSocket handshake: net::ERR_RESPONSE_HEADERS_TRUNCATED 的问题,但多刷新 ...

  10. Scala 学习笔记之函数(1)

    class Student { val mySayHello1: String => Unit = sayHello val mySayHello2: (String, Int) => U ...