ng-bind-html和.$compile的使用

最新推荐文章于 2024-05-30 17:06:00 发布
原创 最新推荐文章于 2024-05-30 17:06:00 发布 · 1.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#angular

本文详细介绍了Angular中ng-bind-html与$compile指令的使用方法。ng-bind-html用于插入包含HTML标签的字符串，但不支持Angular指令；$compile则能编译带有Angular指令的HTML字符串，通过与作用域结合实现数据动态更新。

1.ng-bind-html的使用

这里写图片描述

ng-bind-html:可以插入带标签的字符串。但是需要配合$sce使用。（缺点：标签里面不能带有angular的指令）

2.$compile的使用：可以解决插入带有angular指令的字符串。

这里写图片描述

通过compile服务可以编译html字符串或dom对象或jqLite对象，然后得到一个编译函数，再传入scope，就会在当前作用域进行编译，返回编译好的jqLite对象，这时就可以直接添加到文档中了（也可以先添加到文档再编译）。

编译的实质其实就是对dom对象解析，使dom对象与scope进行耦合，通过绑定可以实现数据的更新

2021-11-09bulidlfs
Crazyingamazying的博客
11-09 1110
#Revision history #V1.1 zhaoxiaohu 2021.07.04 #V1.2 libaolin 2021.07.08 # # Linux From Scratch # Version 7.7-systemd # # Created by Gerard Beekmans # Edited by Matthew Burgess and Armin K. # # Implementer: Andrew Zhao # Create Date: 4-14-202...
Windows PC上创建大数据职业技能竞赛实验环境之六--Flume、Kafka和Flink编程
liu9ang的博客
04-15 2715
1 Flume 参看日志采集工具Flume的安装与使用方法_厦大数据库实验室博客 (xmu.edu.cn)。 查看Flume安装 root@client1:~# flume-ng version Flume 1.7.0 Source code repository: https://git-wip-us.apache.org/repos/asf/flume.git Revision: 511d868555dd4d16e6ce4fedc72c2d1454546707 Compiled by bessb
AngularJS基础语法（2009版本）
最新发布
weixin_63896561的博客
05-30 1104
这个函数会接收一个形参必须是$scope，在这个函数中就可以对ng-controller定义区域内的变量进行变量初始化和创建方法，产生一个单独的作用域空间。ng-controller会创建控制器对象例如MyController，生成一个单独的作用域空间$scope，$scope是在$rootScope下的，在ng-controller控制的view视图内，可以直接调用ng-init初始化的变量。html页面中，需要给标签绑定ng-app指令标记当前页面，注意ng-app通常绑定给body标签。
ng-bind-html 的使用
weixin_34034670的博客
02-04 303
AngualrJS 提供了指令ng-bind-html 用于绑定包含HTML标签的文档，使用方式： <ANY ng-bind-html=""> ... </ANY> 测试案例： index.html <div ng-controller="TestCtrl"> <div> ...
[Angularjs]ng-bind-html指令
weixin_34174322的博客
03-24 258
摘要 在为html标签绑定数据的时，如果绑定的内容是纯文本，你可以使用{{}}或者ng-bind。但在为html标签绑定带html标签的内容的时候，angularjs为了安全考虑，不会将其渲染成html，而是将其当做文本直接在页面上展示。 一个例子 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"&g...
深入理解AngularJS中的ng-bind-html指令
10-20
ng-bind-html和ng-bind的区别就是,ng-bind把值作为字符串,和元素的内容进行绑定,但是ng-bind-html把值作为html,和元素的html进行绑定.相当于jq里面的.text()和.html()。这篇文章主要给大家深入的介绍了AngularJS中ng-bind-html指令 的相关资料,需要的朋友可以参考下。
ng-bind-html指令
一笑的博客
02-20 471
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ng-bind-html指令</title> </head> <body ng-app="myApp" ng-init="username='<h1>shit</h1>'"> <script
angularjs 指令ng-bind-html
行人事，知天命
01-21 783
ng-bind-html 指令是通一个安全的方式将内容绑定到 HTML 元素上。 当你想让 AngularJS 在你的应用中写入 HTML，你就需要去检测一些危险代码。通过在应用中引入 “angular-santize.js” 模块，使用 ngSanitize 函数来检测代码的安全性 ng-bind-html可以将原生html内容写入标签或者元素 用法： 'city'> a.c
详解angularJS动态生成的页面中ng-click无效解决办法
12-09
使用 `$compile` 服务对上述HTML字符串进行编译，同时传递当前作用域 `$scope` 以便让编译后的元素能够访问其中的函数和数据。 ```javascript var $html = $compile(html)($scope); ``` 3. **将编译后的内容...
angular ng-click防止重复提交实例
12-29
Angular ng-click 防止重复提交实例是一个常见的问题，在 Angular 应用程序中，如果用户在短时间内多次点击按钮，可能会导致重复提交数据，从而影响应用程序的稳定性和性能。为了解决这个问题，本文将介绍两种方法来...
AngularJS1 -- ng-bind-html
住在地球的攻城狮
08-23 272
ng-bind-html指令可以安全地将包含 html的内容绑定到视图. ng-bind-html指令需要与angular-sanitize.js配合使用以检测危险代码. 当未引入angular-sanitize.js时 angular会报错提示不安全. 即使绑定变量中没有 html ，anguar依然会报错提示不安全. 无论绑定变量中有无 html ，angu...
ng bind 绑定html标签,angular中的ng-bind-html指令和$sce服务
weixin_31176789的博客
06-10 410
angular js的强大之处之一就是他的数据双向绑定这一牛B功能，我们会常常用到的两个东西就是ng-bind和针对form的ng-model。但在我们的项目当中会遇到这样的情况，后台返回的数据中带有各种各样的html标签。如：$scope.currentWork.description = “hello,今天我们去哪里？”我们用ng-bind-html这样的指令来绑定，结果却不是我们想要的。是这...
angularJs 中的ng-bind-html指令和$sce服务
相约9.28,幸福那一刻
12-22 1593
angular js的强大之处之一就是他的数据双向绑定这一牛B功能，我们会常常用到的两个东西就是ng-bind和针对form的ng-model。但在我们的项目当中会遇到这样的情况，后台返回的数据中带有各种各样的html标签。如： $scope.currentWork.description = “hello,今天我们去哪里？” 我们用ng-bind-html这样的指令来绑定，结果却不是
html元素定义ng bind,深入理解AngularJS中的ng-bind-html指令
weixin_35755188的博客
06-21 435
前言在为html标签绑定数据的时，如果绑定的内容是纯文本，你可以使用{{}}或者ng-bind。但在为html标签绑定带html标签的内容的时候，angularjs为了安全考虑，不会将其渲染成html，而是将其当做文本直接在页面上展示。先来看一个例子angular.module("myapp", []).controller("MyController", function ($scope) {$...
用Ueditor存入数据库带HTML标签的文本，从数据库取出来后，anjular用ng-bind-html处理带HTML标签的文本
Eric_sun8868的博客
11-01 210
ng.module('index-filters', []) .filter('trustHtml', function ($sce) { return function (input) { retu...
ng-bind
xupeng1986的专栏
11-18 992
//{{name}} //{{age}}
ng-bind ng-bind-html ng-bind-template 区别
Christopher的博客
01-07 1681
ng-bind:变量（html标签无效） ng-bind-html:变量（html标签有效） ng-bind-template：表达式（html标签无效）
angularjs中ng-bind-html解析文本
friend_ship的博客
09-03 828
渲染带html结构的字符串，使用ng-bind-html可以实现。 ng-bind-html的坑： ng-bind-html指令会在运行时过滤掉一些不安全的标签来防止xxs攻击，提高安全性。所以会导致字符串的某些标签如<button></button>,<input>等不显示。 解决方案： 1.在angularjs中默认是不相信添加的html内容，ng-...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值