第一种方式：原生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. zookeeper集群安装的奇怪现象

    zookeeper:配置的集群信息是domain:端口2888:端口3888:  domain为内网静态ip:每次启动都不能相互连接报错误: [myid:3] - WARN  [WorkerSende ...

  2. 4-3 线程安全性-原子性-synchronized

    原子性它提供了互斥访问,同一时刻只能有一个线程来对它进行操作.能保证同一时刻只有一个线程来对其进行操作的,除了Atomic包之外,还有锁.JDK提供锁主要分两种,synchronized是一个Java ...

  3. 关于SO_LINGER选项的使用

    结论: linux开启SO_LINGER时,如果设置l_linger为非0, 不管是阻塞socket,非阻塞socket, 在这里都会发生阻塞, 而并不是UNP所讲到的( 非阻塞socket会立即返回 ...

  4. Django框架 之 Pagination分页实现

    Django框架 之 Pagination分页实现 浏览目录 自定义分页 Django内置分页 一.自定义分页 1.基础版自定义分页 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

  5. Flask框架 之 路由和视图详解

    路由+视图 我们之前了解了路由系统是由带参数的装饰器完成的. 路由本质:装饰器和闭包实现的. 路由设置的两种方式 来看个例子. @app.route('/index') def index(): re ...

  6. sed 之 & 符号

    sed 之 & 符号 摘自:https://blog.csdn.net/jasonliujintao/article/details/53509620 & 这个符号,其实很有用,在对相 ...

  7. java发送post 的json请求

    package com.elink.estos.mq.mqmanager; import java.io.IOException; import java.io.InputStream; import ...

  8. 如何在VS和CB中配置MySQL环境

    这里,由于我的MySQL安装在D盘 MY SQL\MySQL Server 5.6该路径下,所以后面的路径均以D:\MY SQL\MySQL Server 5.6开头 在VS中配置MySQL环境 包含 ...

  9. WCF项目问题2-无法激活服务，因为它需要 ASP.NET 兼容性。没有未此应用程序启用 ASP.NET 兼容性。请在 web.config 中启用 ASP.NET 兼容性，或将 AspNetCompatibilityRequirementsAttribute.AspNetCompatibilityRequirementsMode 属性设置为 Required 以外的值。

    无法激活服务,因为它需要 ASP.NET 兼容性.没有未此应用程序启用 ASP.NET 兼容性.请在 web.config 中启用 ASP.NET 兼容性,或将 AspNetCompatibility ...

  10. Python基础入门-字符串

    字符串详解 字符串的用法是最多的,很多功能的实现都离不开字符串,而且字符串的使用方法也很多,这里面不能说全部给大家一一介绍,只能说把一些常用的列举出来,方便回忆或者说供大家参考,谢谢!请继续往下看~~ ...