angularjs中使用ng-bind-html和ng-include的实例

更新时间：2017年04月28日 09:59:55 投稿：jingxian

下面小编就为大家带来一篇angularjs中使用ng-bind-html和ng-include的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

下面这个例子，往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的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详细分析使用AngularJS编程中提交表单的方式
这篇文章主要介绍了详细分析使用AngularJS提交表单的方式,AngularJS是非常热门的JavaScript库,文中展示了AngularJS在前端与后端的PHP进行交互的场景,需要的朋友可以参考下
2015-06-06
Angular.JS实现无限级的联动菜单(使用demo)
这篇文章主要介绍了Angular.JS中实现无限级联动菜单的使用示例，本文是在之前的一篇文章的基础上进行的几个demo分享，有需要的朋友可以参考借鉴，下面来一起看看吧。
2017-02-02
Angular2实现自定义双向绑定属性
本篇文章主要介绍了Angular 2实现自定义双向绑定属性，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
AngularJS基础学习笔记之控制器
在AngularJS中，控制器是一个Javascript函数（类型/类），用来增强除了根作用域意外的作用域实例的。当你或者AngularJS本身通过<code>scope.$new</code>俩创建一个新的子作用域对象时，有一个选项能让你将它当做参数传递给控制器。
2015-05-05
理解AngularJs指令
这篇文章主要介绍了AngularJs指令
2015-12-12
AngularJS ng-repeat数组有重复值的解决方法
不知道大家是否遇到过这个问题，在当Angular.JS ng-repeat数组中有重复项时，系统就会抛出异常，这是该怎么做？本文通过示例代码介绍了详细的解决方法，有需要的朋友们可以参考借鉴，下面来一起看看吧。
2016-10-10
浅谈Angular6的服务和依赖注入
这篇文章主要介绍了浅谈Angular6的服务和依赖注入，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
AngularJS入门教程（零）：引导程序
这篇文章主要介绍了AngularJS入门教程（零）：引导程序,本文是系列文章中的一篇,本系列文章用开发一个AngularJS应用来讲解,需要的朋友可以参考下
2014-12-12
详解Angular 4 表单快速入门
本篇文章主要介绍了详解Angular 4 表单快速入门，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
angularJS自定义directive之带参方法传递详解
今天小编就为大家分享一篇angularJS自定义directive之带参方法传递详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-10-10