angularjs中使用ng-bind-html和ng-include的实例_网络技术

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

发布时间 - 2026-01-11 00:53:02 点击率：次

下面这个例子，往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 # ng-bind-html # ng-include # 深入理解AngularJS中的ng-bind-html指令 # 深入理解AngularJS中的ng-bind-html指令和$sce服务 # AngularJS ng-bind-html 指令详解及实例代码 # angularjs中ng-bind-html的用法总结 # 给大家 # 粗体 # 希望能 # 要将 # 这篇 # 报错 # 小编 # 大家多多 # 时需 # app # myApp # head # gt # ng # doctype # demo # title # UTF # meta # script

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：如何配置Linux网络接口安全策略 MAC地址过滤实现方案

下一篇：宝塔面板建站后服务器IP能访问，但域名不能访问如何解决？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：如何配置Linux网络接口安全策略 MAC地址过滤实现方案

下一篇：宝塔面板建站后服务器IP能访问，但域名不能访问如何解决？