• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > angularjs中使用ng-bind-html和ng-include的实例

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了angularjs项目实例,angularjs实例,angularjs开发实例,angularjs实例教程,angularjs 自动化实例等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

下面这个例子,往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>
</div>

注意在赋值时需要将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>
</div>

demo1_1.html

<b>粗体内容222</b><br/><i>斜体内容222</i>
</div>

以上这篇angularjs中使用ng-bind-html和ng-include的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • angularjs中使用ng-bind-html和ng-include的实例
  • AngularJS双向绑定和依赖反转实例详解
  • AngularJS中的拦截器实例详解
  • AngularJS实现路由实例
  • AngularJs上传前预览图片的实例代码
  • AngularJS的依赖注入实例分析(使用module和injector)

相关文章

  • 2017-05-11codeMirror插件使用讲解
  • 2017-08-02jquery选择器
  • 2017-05-11如何快速上手Vuex
  • 2017-05-11JS+HTML5 FileReader对象用法示例
  • 2017-05-11bootstrap组件之导航组件使用方法
  • 2017-05-11JavaScript用JSONP跨域请求数据实例详解
  • 2017-05-11微信小程序 地图map详解及简单实例
  • 2017-05-11jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
  • 2017-05-11jQuery模拟下拉框选择对应菜单的内容
  • 2017-05-11JavaScript常用正则函数用法示例

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • Node+Express+MongoDB实现登录注册功能实例
    • angular实现商品筛选功能
    • 微信小程序实战之自定义抽屉菜单(7)
    • javascript实现简易计算器
    • 详解使用grunt完成requirejs的合并压缩和js文件的版本控制
    • jQuery实现获取h1-h6标题元素值的方法
    • jQuery中 bind的用法简单介绍
    • Bootstrap表格制作代码
    • 教你用十行node.js代码读取docx的文本
    • 微信小程序 ES6Promise.all批量上传文件实现代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有