代码:

<!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. Tomcat下java普通类IO文件路径问题

    由于在windows和linux下文件路径的表示方式存在差异 而我们的项目大多是在windows下的eclipse中完成测试 然后部署到linux的tomcat服务器中 这个时候我们既不能把地址写死( ...

  2. 性能测试之 Gatling

    在应用程序上线之前,有多少人做过性能测试? 估计大部分开发者更多地关注功能测试,并且会提供一些单元测试和集成测试的用例.然而,有时候性能漏洞导致的影响比未发现的业务漏洞更严重,因为性能漏洞影响的是整个 ...

  3. mysql 事物四大特性和事物的四个隔离

    1.事物四大特性(ACID) 原子性(atomicity):一个事务必须视为一个不可分割的最小工作单元,整个事务中的所有操作要么全部提交成功,要么全部失败回滚,对于一个事务来说,不可能只执行其中的一部 ...

  4. Angular 页面初始化动画

    用于进入组件前的加载动画 第一步:index.html 定义动画模板和样式 // 样式 <style type="text/css">.preloader { posi ...

  5. Eclipse利用Maven快速上手搭建MyBatis

    一.what is maven? Maven项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的项目管理工具软件. Maven 除了以程序构建能力为特色之外,还提供高级项目管理 ...

  6. 织梦cms列表页获取标签

    <!-- 标签 --> [field:id runphp='yes'] global $cfg_cmspath; $tags = GetTags(@me); $revalue = ''; ...

  7. 【SpingBoot】spring静态工具类注入问题

    package cn.zwqh.action; import javax.annotation.PostConstruct; import javax.annotation.Resource; imp ...

  8. .netCore+Vue 搭建的简捷开发框架 (4)--NetCore 基础 -2

    上节中,我们初步的介绍了一下NetCore的一些基础知识,为了控制篇幅(其实也是因为偷懒),我将NetCore 基础分为两部分来写. 0.WebAPI 项目的建立 1..NetCore 项目执行(加载 ...

  9. django后台管理-admin

    0922自我总结 django后台管理-admin 一.模型注册 admin.py 注册方式一: #在对于注册的app中的admin文件中导入模型然后注册模型 admin.site.register( ...

  10. postman动态数据获取

    1.以获取token(JWT)和uid为例 2.在登录接口的tests中写入代码(因为登录接口报文信息中有返回JWT和uid) 3.在其他接口中需要用到JWT和uid的地方设置变量{{JWT}}和{{ ...