下面这个例子，往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. JVM的内存结构，JVM的回收机制

    内存作为系统中重要的资源,对于系统稳定运行和高效运行起到了关键的作用,Java和C之类的语言不同,不需要开发人员来分配内存和回收内存,而是由JVM来管理对象内存的分配以及对象内存的回收(又称为垃圾回收 ...

  2. 【BZOJ 3136】 3136: [Baltic2013]brunhilda （数论？）

    3136: [Baltic2013]brunhilda Time Limit: 40 Sec  Memory Limit: 128 MBSubmit: 238  Solved: 73[Submit][ ...

  3. luogu P1809 过河问题_NOI导刊2011提高（01）

    题目描述 有一个大晴天,Oliver与同学们一共N人出游,他们走到一条河的东岸边,想要过河到西岸.而东岸边有一条小船. 船太小了,一次只能乘坐两人.每个人都有一个渡河时间T,船划到对岸的时间等于船上渡 ...

  4. 我的OI生涯 第一章

    第一章   一入电竞深似海 我叫WZY,是TSYZ的一名学生. 2016年7月10日,我进了一个叫做oi的坑. 那时的我不知道什么叫竞赛,不知道什么叫编程,不知道什么是c++. 就记得前一天我特意去图 ...

  5. Android为什么需要广播Broadcast

       在Android系统中,为什么需要广播机制呢?广播机制,本质上它就是一种组件间的通信方式,如果是两个组件位于不同的进程当中,那么可以用Binder机制来实现,如果两个组件是在同一个进程中,那么它 ...

  6. Request Response 跳转页面的理解

    1.response 跳转页面 private void writeContent(String content) { HttpServletResponse response = ((Servlet ...

  7. servlet中请求转发（forword）和重定向（redirect）的区别

    servlet请求转发与重定向的区别: request.setAttribute("test","hello"); request.getRequestDisp ...

  8. WebDriver元素查找方法摘录与总结

    WebDriver元素查找方法摘录与总结 整理By:果冻迪迪 selenium-webdriver提供了强大的元素定位方法,支持以下三种方法. • 单个对象的定位方法 • 多个对象的定位方法 • 层级 ...

  9. Java---ConcurrentHashMap分析

    这是第二次分析concurrentHashMap 先回顾一下 1.concurrentHashMap是在jdk1.5版本之后推出的,位于java.util.concurrent包中. 2.基于Hash ...

  10. CentOS 6.9/7通过yum安装指定版本的Redis

    一.安装 // 安装依赖 # wget http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm && ...