下面这个例子，往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. pool创建多进程

    这中方式用的比较多,毕竟要控制并发数量,不可能不限制并发数 #_*_coding:utf-8_*_ from multiprocessing import Pool import time def f ...

  2. FastReport.Net使用：[36]"续表"

    1. RepeatedBand的打印和子报表的使用. RepeatedBand实现方法:设置Band为每页重复.注意,从第二次打印开始,就是重复打印了.第一次打印不认为是RepeatedBand. 报 ...

  3. 【BZOJ 3144】 3144: [Hnoi2013]切糕 （最小割模型）

    3144: [Hnoi2013]切糕 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1764  Solved: 965 Description Inp ...

  4. php正则给图片提取/替换/添加alt标签的正则代码

    有的时候我们需要对富文本编辑器的内容做一些处理,例如图片的alt标签.百度的富文本编辑器添加的图片就是没有的,那么我们要添加就必须使用正则了,下面一起来看看如何实现吧. $preg = "/ ...

  5. python实现图片验证码

    1 验证基础知识1.1 Python生成随机验证码,需要使用PIL模块. # 安装 pip3 install pillow 1.2 创建图片 from PIL import Image img = I ...

  6. bzoj 1834: [ZJOI2010]network 网络扩容 -- 最大流+费用流

    1834: [ZJOI2010]network 网络扩容 Time Limit: 3 Sec  Memory Limit: 64 MB Description 给定一张有向图,每条边都有一个容量C和一 ...

  7. Velocity模板学习（一）

    一.Velocity是什么 Velocity是一个基于Java的模板引擎,允许任何人仅仅简单地使用模板语言就可以引用由Java代码编写的对象. 二.Velocity的基本语法 1.变量 变量的定义 在 ...

  8. python开发_tempfile

    python中的tempfile模块,是为创建临时文件(夹)所提供的 如果你的应用程序需要一个临时文件来存储数据,但不需要同其他程序共享,那么tempfile模块来创建临时文件(夹)是个不错的选择 其 ...

  9. Spring工具类ToStringBuilder用法简介

    比如说我们需要打印某个方法的User参数对象 package test; /** * * @author zhengtian * @time 2012-6-28 */ public class Use ...

  10. Spring注入日期到bean属性-CustomDateEditor

    这一个Spring例子向您展示如何为bean属性注入一个“日期”. package com.yiibai.common; import java.util.Date; public class Cus ...