第一种方式：原生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页面添加内容节点元素代码段的两种方法的更多相关文章

  1. SpringBoot中使用Spring Data Jpa 实现简单的动态查询的两种方法

    软件152 尹以操 首先谢谢大佬的简书文章:http://www.jianshu.com/p/45ad65690e33# 这篇文章中讲的是spring中使用spring data jpa,使用了xml ...

  2. 将DataTable内容导出到Excel表格的两种方法

    方法一:循环DataTable单元格内容拼接字符串,利用StreamWriter的Write方法将字符串写入Excel文件中 这种方法很实现很简单.拼接字符串时,每个单元格之间添加'\t'(表示一个占 ...

  3. laravel5.5框架中视图间如何共享数据?视图间共享数据的两种方法

    laravel框架中视图间共享数据有两种,一种是用视图门面share()方法实现,另一种是用视图门面composer() 方法实现,那么,两种方法的实现究竟是怎样的呢?让我们来看一看接下来的文章内容. ...

  4. 【get√】golang中实现从腾讯云CVM查询网卡流量的两种方法

    公众号文章链接 主要参考了以下位置的资料: 云服务器监控接口 腾讯云go-sdk example 方法一:使用腾讯云go-sdk go.mod文件中增加这样一行: github.com/tencent ...

  5. js如何实现动态的在表格中添加和删除行？（两种方法）

    js如何实现动态的在表格中添加和删除行?(两种方法) 一.总结 1.table元素有属性和一些方法(js使用) 方法一:添加可通过在table的innerHTML属性中添加tr和td来实现 tab.i ...

  6. Java 获取*.properties配置文件中的内容 ，常见的两种方法

    import java.io.InputStream; import java.util.Enumeration; import java.util.List; import java.util.Pr ...

  7. Java代码中获取配置文件(config.properties)中内容的两种方法

    方法千千万,本人暂时只总结了两种方法. (1)config.properties中的内容如图 在applicationContext.xml中配置 <!-- 引入配置文件 --> < ...

  8. WebGL中添加天空盒的两种方法

    天空盒 的添加可以让模型所在的场景非常漂亮,而其原理也是非常简单的,相信看完下面代码就可以明白了. 说到天空盒的两种方法,倒不如说是两种写法,分别用了纹理加载的两个方法:loadTexture和loa ...

  9. .net中创建xml文件的两种方法

    .net中创建xml文件的两种方法 方法1:根据xml结构一步一步构建xml文档,保存文件(动态方式) 方法2:直接加载xml结构,保存文件(固定方式) 方法1:动态创建xml文档 根据传递的值,构建 ...

随机推荐

  1. 【转发】徐汉彬：Web系统大规模并发——电商秒杀与抢购

    徐汉彬:Web系统大规模并发——电商秒杀与抢购 发表于2014-12-02 09:30| 73110次阅读| 来源CSDN| 114 条评论| 作者徐汉彬 问底徐汉彬大数据 摘要:电商的秒杀和抢购,从 ...

  2. java代理模式与装饰者模式

    静态代理和装饰者模式的区别: 先来看一下装饰者模式的定义:装饰者模式动态地将责任附加到对象上.若要扩展功能,装饰者提供了比继承更有弹性的替代方案. 总结一下采用装饰者模式是为了增强或拓展原对象的功能. ...

  3. 面试题:java实例变量,局部变量,类变量 背1

    一.实例变量 也叫对象变量.类成员变量:从属于类由类生成对象时,才分配存储空间,各对象间的实例变量互不干扰,能通过对象的引用来访问实例变量.但在Java多线程中,实例变量是多个线程共享资源,要注意同步 ...

  4. SqlServer——神奇代码1之Update

    说明:一个带有update的循环的代码.很简单,但是在QQ群里问了,应该说是很少有人注意这个问题,也就是很少有人真的理解SQL中的Update. 代码如下: if object_id('tempdb. ...

  5. 37.ROUND() 函数

    ROUND() 函数 ROUND 函数用于把数值字段舍入为指定的小数位数. SQL ROUND() 语法 SELECT ROUND(column_name,decimals) FROM table_n ...

  6. GridSearchCV scoring 参考

    http://scikit-learn.org/stable/modules/model_evaluation.html Scoring parameter: Model-evaluation too ...

  7. 对C#泛型讲的很好的一篇文章

    请参考 https://www.cnblogs.com/kissdodog/archive/2013/01/27/2879185.html

  8. Java 数据结构之双链表

    package Linked; public class Mylinked { private Node first;//链表的第一个节点 private Node last;//链表的最后一个节点 ...

  9. PROC程序设计

    通过在过程化编程语言中嵌入SQL语句而开发出的应用程序称为Pro程序. 在C/C++语言中嵌入SQL语句而开发出的应用程序称为Pro*C/C++程序. –在通用编程语言中使用的SQL称为嵌入式SQL: ...

  10. TensorFlow安装教程

    Windows7 安装TensorFlow(本人试了好多方法后的成果):https://www.cnblogs.com/bxyan/p/6869237.html Linux: sudo pip ins ...