第一种方式：原生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. Python模块及其导入

    一.模块 1.模块的定义: 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少, 很多编程语言都采用这种组织代码的方式.在Python中,一个.py文件 ...

  2. linux的基本指令--第三节

    查找与检索: 一.文件名查找:find . -name "test*"      find 路径  查找类型  名字  未输入路径则默认当前路径 二 . 内容检索:grep  &q ...

  3. Android剖析和运行机制

    Android剖析和运行机制 大纲: 1. Android剖析 Linux内核本地库(Native Libraries)Android运行时(Android Runtime)应用框架 2. Andro ...

  4. xcode恢复语法高亮

    [xcode恢复语法高亮] 非常简单,在Organizer中删除derivedData.

  5. docker swarm && compose 示例

    docker swarm 创建docker swarm集群 //master节点操作 docker swarm init --advertise-addr materip //node节点操作 -1x ...

  6. EF中的批量操作

    阅读目录 插入 更新 删除 在使用EF的过程中,我们经常会遇到需要批量操作数据的场景,批量操作有的时候不仅能提高性能,比如使用SqlBulkCopy进入批量插入的时候,而且比较方便操作,提高效率.那么 ...

  7. css四可见,部分可见和重叠半透明

    <html> <head> <title>javascript</title> <style type="text/css"& ...

  8. 最新Eclipse Photon安装tomcat

    发现最新版的eclipse竟然没有tomcat配置项,可能是因为spring boot很火,所以server默认就不包含tomcat,需要手动安装组件,  Version: Photon Releas ...

  9. Luogu 4159 [SCOI2009]迷路

    BZOJ 1297 应当是简单题. 发现边权的数量很小,所以我们暴力把一个点拆成$9$个点,然后把$(x, i)$到$(x, i + 1)$连边,代表转移一次之后可以走回来:对于每一条存在的边$(i, ...

  10. Row_Number() OVER()函数使用举例

    语法:ROW_NUMBER() OVER(PARTITION BY COLUMN ORDER BY COLUMN) 简单的说row_number()从1开始,为每一条分组记录返回一个数字,这里的ROW ...