下面这个例子，往div标签内添加html内容：

<!doctype html>

<html ng-app="myApp">

<head>

  <meta charset="UTF-8">

  <title>demo</title>

  <script type="text/javascript" src="lib/angularjs/angular.min.js" charset="utf-8"></script>

</head>

<body ng-controller="ctrl">

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

<script>

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

app.controller("ctrl",function($scope,$sce){

    $scope.myText = $sce.trustAsHtml("<b>粗体内容</b><br/><i>斜体内容</i>");

});

</script>

</body>

</html>

注意在赋值时需要将html用$sce.trustAsHtml作一个处理，不然页面会报错，无法输出内容。

下面是ng-include的使用示例，跟上面的例子差不多，只是把要添加的html内容放到一个文件中：

<!doctype html>

<html ng-app="myApp">

<head>

  <meta charset="UTF-8">

  <title>demo</title>

  <script type="text/javascript" src="lib/angularjs/angular.min.js" charset="utf-8"></script>

</head>

<body ng-controller="ctrl">

    <div ng-include="'demo1_1.html'"></div>

<script>

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

app.controller("ctrl",function($scope){});

</script>

</body>

</html>

demo1_1.html

<b>粗体内容222</b><br/><i>斜体内容222</i>

angularjs中使用ng-bind-html和ng-include的更多相关文章

  1. AngularJS中angular.min.js:80 Error: [ng:areq] http://errors.angularjs.org/1.2.9/ng/areq

    报出来的时候,出现这种错误,是因为在引入控制器的时候没有引入成功,我遇到这个错误是在因为没有将父控制器引入到子控制器中.

  2. 深入学习AngularJS中数据的双向绑定机制

    来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持 ...

  3. AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5

    前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...

  4. AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3

    1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...

  5. 转: 理解AngularJS中的依赖注入

    理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...

  6. (九)通过几段代码，理清angularJS中的$injector、$rootScope和$scope的概念和关联关系

    $injector.$rootScope和$scope是angularJS框架中比較重要的东西,理清它们之间的关系,对我们兴许学习和理解angularJS框架都很实用. 1.$injector事实上是 ...

  7. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  8. 理解AngularJS中的依赖注入

    点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...

  9. angularjs 中通过 $location 进行路由跳转传参

    $location.path('/page1').search({id: $scope.id,name:$scope.name}); 带参数跳转页面,在新的页面通过$routeParams接收参数 $ ...

  10. angularJS中$apply()方法详解

    这篇文章主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下   对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的 ...

随机推荐

  1. [bzoj1021][SHOI2008]Debt 循环的债务 (动态规划)

    Description Alice. Bob和Cynthia总是为他们之间混乱的债务而烦恼,终于有一天,他们决定坐下来一起解决这个问题.不过,鉴别钞票的真伪是一件很麻烦的事情,于是他 们决定要在清还债 ...

  2. bzoj 3052 树上莫队 待修改

    感谢: http://vfleaking.blog.163.com/blog/static/174807634201311011201627/ http://hzwer.com/5250.html 好 ...

  3. Failed to read auto-increment value from storage engine错误的处理方法

    在进行数据的插入时,系统提示Failed to read auto-increment value from storage engine(从存储引擎读取自增字段失败)错误,经查阅资料,解决方法如下: ...

  4. Java获取Access数据库连接单例简单实例

    Java在连接Access数据库时比较方便,不用导入第三方的jar包,jdk中内置的odbc可以完成Access数据库的访问,需要注意的是,我们首先要配置Access数据库的数据源,还要区分x86和x ...

  5. css选择器:first-child和nth-child 采坑记

    今天想用nth-child来给一个类似于树的目录(bootstrap-nav-tree  一个angularjs插件)设置不同的颜色,结构大致类似于 <ul> <li class=& ...

  6. lwIP Memory Management

    http://lwip.wikia.com/wiki/Lwipopts.h Memory management (RAM usage) /** * MEM_LIBC_MALLOC==1: Use ma ...

  7. JAVA EE 博客实例

    http://www.cnblogs.com/hoojo/category/276244.html

  8. TCP通信粘包问题分析和解决（全）（转）

    TCP通信粘包问题分析和解决(全) 在socket网络程序中,TCP和UDP分别是面向连接和非面向连接的.因此TCP的socket编程,收发两端(客户端和服务器端)都要有成对的socket,因此,发送 ...

  9. git ssh key配置

    原文:https://blog.csdn.net/lqlqlq007/article/details/78983879 git clone支持https和git(即ssh)两种方式下载源码:  当使用 ...

  10. Android开发利用Volley框架下载和缓存网络图片

    2013年Google I/O大会上推出了一种新的网络通信框架——Volley,Volley可是说是把AsyncHttpClient和Universal-Image-Loader的优点集于了一身,既可 ...