angularjs中向html页面添加内容节点元素代码段的两种方法
第一种方式:原生JS向html页面添加内容节点元素代码段:
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.6.0/angular.min.js"></script>
</head> <body> <div ng-app="myApp" ng-controller="personCtrl"> <div id="test"></div>
</div> <script> var app = angular.module('myApp', []);
app.controller('personCtrl', function ($scope) { $scope.test = '<p><span style="border: 1px solid #000000;"><span style="text-decoration: line-through; font-family: 宋体, SimSun;"><em><strong>少时诵诗书所所所所所所所所所所所所所所所所所所所所所所所</strong></em></span><span style="text-decoration: line-through; font-family: 宋体, SimSun;"><em><strong><span style="text-decoration: line-through; font-family: 宋体, SimSun; border: 1px solid #000000;"></span></strong></em></span></span></p>'
document.getElementById("test").innerHTML = $scope.test });
</script> </body> </html>
第二种方法:angular-sanitize方法向html页面添加内容节点元素代码段:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdn.staticfile.org/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script></head>
<body> <div ng-app="myApp" ng-controller="myCtrl"> <p ng-bind-html="myText"></p> </div> <script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myText = "My name is: <h1>John Doe</h1>";
});
</script> <p><b>注意:</b> 该实例包含了 "angular-sanitize.js" 文件,
该文件移除 HTML 中的危险代码。</p> </body>
</html>
angularjs中向html页面添加内容节点元素代码段的两种方法的更多相关文章
- SpringBoot中使用Spring Data Jpa 实现简单的动态查询的两种方法
软件152 尹以操 首先谢谢大佬的简书文章:http://www.jianshu.com/p/45ad65690e33# 这篇文章中讲的是spring中使用spring data jpa,使用了xml ...
- 将DataTable内容导出到Excel表格的两种方法
方法一:循环DataTable单元格内容拼接字符串,利用StreamWriter的Write方法将字符串写入Excel文件中 这种方法很实现很简单.拼接字符串时,每个单元格之间添加'\t'(表示一个占 ...
- laravel5.5框架中视图间如何共享数据?视图间共享数据的两种方法
laravel框架中视图间共享数据有两种,一种是用视图门面share()方法实现,另一种是用视图门面composer() 方法实现,那么,两种方法的实现究竟是怎样的呢?让我们来看一看接下来的文章内容. ...
- 【get√】golang中实现从腾讯云CVM查询网卡流量的两种方法
公众号文章链接 主要参考了以下位置的资料: 云服务器监控接口 腾讯云go-sdk example 方法一:使用腾讯云go-sdk go.mod文件中增加这样一行: github.com/tencent ...
- js如何实现动态的在表格中添加和删除行?(两种方法)
js如何实现动态的在表格中添加和删除行?(两种方法) 一.总结 1.table元素有属性和一些方法(js使用) 方法一:添加可通过在table的innerHTML属性中添加tr和td来实现 tab.i ...
- Java 获取*.properties配置文件中的内容 ,常见的两种方法
import java.io.InputStream; import java.util.Enumeration; import java.util.List; import java.util.Pr ...
- Java代码中获取配置文件(config.properties)中内容的两种方法
方法千千万,本人暂时只总结了两种方法. (1)config.properties中的内容如图 在applicationContext.xml中配置 <!-- 引入配置文件 --> < ...
- WebGL中添加天空盒的两种方法
天空盒 的添加可以让模型所在的场景非常漂亮,而其原理也是非常简单的,相信看完下面代码就可以明白了. 说到天空盒的两种方法,倒不如说是两种写法,分别用了纹理加载的两个方法:loadTexture和loa ...
- .net中创建xml文件的两种方法
.net中创建xml文件的两种方法 方法1:根据xml结构一步一步构建xml文档,保存文件(动态方式) 方法2:直接加载xml结构,保存文件(固定方式) 方法1:动态创建xml文档 根据传递的值,构建 ...
随机推荐
- canvas二进制字符下落
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 3 ...
- Collision Detection
[Collision Detection] Collision Detection是Rigidbody中的一个属性.所以显然Collision Detection指定的类型只在Rigidbody之间才 ...
- laravel 验证表单信息
1控制器验证 $this->validate($request,[ 'Student.name'=>'required|min:2|max:20', 'Student.age'=>' ...
- IWebBrowser和IE浏览器的行为不一样
原本一直以为IWebBrowser2的行为和IE浏览器的行为应该是一样的,但是最近发现事实不是如此. IE8以后的浏览器都带有兼容模式,而IWebBrowser2默认情况下是在兼容模式下运行的,可以参 ...
- Ubuntu18.04创建新的系统用户
目标: 1.为测试学习Docker,在虚拟机OS为18.04里,创建一个系统账号,账号名称:docker 2.在/home下有新建username的文件夹 一.建立账号 1.以root账号登录 2.u ...
- Ubuntu16.04 ARM 编译 编译器版本和unordered_map map问题
源文件内使用unordered_map时候,例如如下demo #include <unordered_map> void foo(const std::unordered_map<i ...
- chrome浏览器-Toolbar工具条不显示
来源于<sencha touch 权威指南> ------------------------------------ 工具条按钮在chrome下不显示,不知是不支持还是代码有问题.app ...
- scala _ parameter
Given that sequence, use reduceLeft to determine different properties about the collection. The foll ...
- Luogu 4251 [SCOI2015]小凸玩矩阵
BZOJ 4443 二分答案 + 二分图匹配 外层二分一个最小值,然后检验是否能选出$n - k + 1$个不小于当前二分出的$mid$的数.对于每一个$a_{i, j} \geq mid$,从$i$ ...
- SQL 左联接去除左边重复的数据
代码如下: use DB go select table1.*,b.OPTime from [dbo].[table1] left join( select * from (select table2 ...