下面这个例子,往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. Visual Studio 2017为Android APK包签名

    Visual Studio 2017为Android APK包签名   为Android APK包签名,可以保证后期的App顺利升级.在Visual Studio 2015中,IDE会自动生成两个AP ...

  2. Vim的一些补充

    查看当前路径 :pwd 切换当前路径到当前打开文件所在路径 :cd %:p:h 解释: %表示当前文件名,%:p表示包含文件名的全部路径,%:p:h表示文件所在路径(head of the full ...

  3. CodeForces 1065E. Side Transmutations 计数

    昨天不该早点走的.... 首先操作限制实际上是一个回文限制 每个$b[i] - b[i - 1]$互不干扰,不妨设这个串关于中心点对称的这么一对区间的串分别为$(S_1, S_2)$ 题目的限制相当与 ...

  4. 初涉springboot(一)

    概述 1.了解springboot的作用 2.构建第一个springboot项目 一.springboot的作用 ① 原先在构建SSM项目的时候,可以感觉到,在一些不是很大的项目,构建配置文件的过程所 ...

  5. 【8.31校内测试】【找规律二分】【DP】【背包+spfa】

    打表出奇迹!表打出来发现了神奇的规律: 1 1 2 2 3 4 4 4 5 6 6 7 8 8 8 8 9 10 10 11 12 12 12 13 14 14 15 16 16 16 16 16.. ...

  6. CCTableView使用及其ViewSize动态调整

    cocos2dx的CCTableView使用及其ViewSize动态调整,直接上代码参考如下: // // summary : 水平滑动样式的TableView用法 void createGlobal ...

  7. 三、python的数据类型 列表、元组、字典

    1.list 列表 列表是由一序列特定顺序排列的元素组成的.可以把字符串,数字,字典等都可以任何东西加入到列表中,列表中的元素之间没有任何关系.列表也是自带下标的,默认也还是从0开始. List常用的 ...

  8. iOS 画圆

    _demoView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)]; [self.view addSubview:_de ...

  9. 更新yum源/apt-get源

    国内开源镜像站有:网易: http://mirrors.163.com/ 搜狐: http://mirrors.sohu.com/阿里云: http://mirrors.aliyun.com/北京理工 ...

  10. Wide-range regulator delivers 12V, 3A output from 16 to 100V source

    Synchronous buck regulators offer high efficiency and are popular in applications in which available ...