angularjs中向html页面添加内容节点元素代码段的两种方法

时间：2021-02-28 23:32:13

第一种方式：原生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&period;5框架中视图间如何共享数据&quest;视图间共享数据的两种方法

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

  4. 【get&Sqrt;】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 获取&ast;&period;properties配置文件中的内容 ，常见的两种方法

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

  7. Java代码中获取配置文件&lpar;config&period;properties&rpar;中内容的两种方法

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

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

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

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

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

随机推荐

  1. 如何用openvr api打开vive前置摄像头

    随着越来越多的开发者开始他们的VR开发工作,他们看到了这项技术的巨大潜力,像是Valve这样的公司正在想办法保证他们的软件开发包(SDK)能够提供尽量多的功能.今天这家公司发布了其针对SteamVR的 ...

  2. Grid分组特性

    Ext.onReady(function () {                Ext.define('personInfo', {                    extend: 'Ext. ...

  3. Jquery zTree结合Asp&period;net实现异步加载数据

    zTree结合Asp.net实现异步加载数据 实现简单操作 zTree 下载 api 访问 :http://www.ztree.me/v3/main.php 例子中用到json数据转化 newtons ...

  4. HDU 4010 Query on The Trees&lpar;动态树&rpar;

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4010 题意:一棵树,四种操作: (1)若x和y不在一棵树上,将x和y连边: (2)若x和y在一棵树上, ...

  5. C&plus;&plus;基础学习教程（八）

    转载请注明出处:http://blog.csdn.net/suool/article/details/38300117 引入 在进行下一步的学习之前,我们须要厘清几个概念. RAII 首先介绍一个编程 ...

  6. CodeBlocks使用介绍

    CodeBlocks对单个文件没法调试,需要建工程后才能调试,所以使用CodeBlocks必须先建工程. 一.如何用CodeBlocks建工程文件. 选择File->New->Projec ...

  7. spring-boot-2&period;0&period;3之quartz集成，最佳实践

    前言 开心一刻 快过年了,大街上,爷爷在给孙子示范摔炮怎么放,嘴里还不停念叨:要像这样,用劲甩才能响.示范了一个,两个,三个... 孙子终于忍不住了,抱着爷爷的腿哭起来:爷呀,你给我剩个吧! 新的一年 ...

  8. Quartz框架学习&lpar;1&rpar;—核心层次结构

    Quartz框架学习 Quartz(任务调度)框架的核心组件: job:任务.即任务调度行为中所要调度的对象. trigger:触发器.是什么促使了一个任务的调度?当然是时间.这也算事件驱动类型程序. ...

  9. eclipse相关问题处理

    maven,新建的web工程下,没有resource跟test目录,做法:https://blog.csdn.net/gengjianchun/article/details/78679036 项目右 ...

  10. es6 封装一个基础的表单验证

    1, 需求分析 设计一个通用的表单验证,如果后期表单中添加了更多的需求,不需要更改之前的代码逻辑,最好不要改之前的代码,需要加什么直接加就好了. 2,代码分析 此表单验证最好返回一个函数,在api设计 ...

相关文章