angularjs中使用ng-bind-html和ng-include的实例
2017-04-28 09:59
841 查看
下面这个例子,往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会过滤html中style属性的问题
- 解决AngularJS使用ng-bind-html会过滤html中style属性的问题
- angularjs中ng-bind-html使用问题
- AngularJS使用ng-bind-html会过滤html中style属性的问题
- angularjs使用ng-messages-include实例
- angularjs中ng-bind-html的用法总结
- [Angularjs]ng-bind-html指令
- angularjs 的ng-bind-html过滤了内容的style
- 解决使用angularjs时页面因为{{ }}闪烁的两种方式ng-bind,ng-cloak
- ng-bind-html 的使用
- AngularJs的ng-include的使用与实现
- angularJS中把html格式的字符串转成html格式显示,ng-bind-html与trustAsHtml的过滤器
- angularjs 可以加入html标签方法------ng-bind-html的用法总结(1)
- ng-bind-html 的使用
- angularJs 中的ng-bind-html指令和$sce服务
- AngularJS ng-bind-html 指令详解及实例代码
- 使用ng-bind-html标签 注意事项
- 利用AngularJS中ng-include实现静态HTML头文件和尾文件导入
- 深入理解AngularJS中的ng-bind-html指令