Angular1 ng-bind-html 和 directive绑定的解决方案

最新推荐文章于 2019-09-03 10:14:13 发布
最新推荐文章于 2019-09-03 10:14:13 发布
阅读量982 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： angularjs1 文章标签： angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_33315185/article/details/66972119
本文探讨了在使用Angular框架时遇到的一个常见问题：当利用ng-bind-html展示带有自定义指令的HTML内容时，这些自定义指令无法正常工作。文章介绍了如何通过引入angular-bind-html-compile插件来解决这一问题，并确保自定义指令可以正确地被解析。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

很多时候我们在使用类似smidor这种文本编辑器会在数据库中保存一些HTML标签，当我们使用ng-bind-html内置标签将这些HTML文本渲染到页面时会遇到一个坑。那就是我们在HTML中自定义指令并不会显示出来

这是由于ng-bind-html这个指令对于其中的模板没有进行编译。这个时候就会用到angular-bind-html-compile这个插件。

当我们使用bing-html-compile指令这样其内部就可以包含directive.
在安装插件之后，先将依赖angular-bind-html-compile注入到你的模板里就好咯。

使用ng-bind-html标签 注意事项
Candy_home的专栏
11-05 5250
在AngularJs中，使用ng-bind-html标签时，符号的转义
angular1.x 中的$sce/ng-bind-html用法
hanker的博客
05-16 708
向作者致敬问题提出但在我们的项目当中会遇到这样的情况，后台返回的数据中带有各种各样的html标签 angularJs输出html的时候，浏览器并不解析这些html标签 我们用ng-bind-html这样的指令来绑定，浏览器中显示的还是html代码解决方案此时可以通过$sce服务把一些地址变成安全的、授权的链接…简单地说，就像告诉门卫，这个陌生人其实是我的好朋友，很值得信赖，不必拦截它！解决方法1
directive ngBindHtml
weixin_34274029的博客
06-13 74
　　评估表达式，并以安全的方式将生成的HTML插入到元素中。默认情况下，生成的HTML内容将使用$sanitize服务进行清理。为了使用这个功能，确保$sanitize是可用的，例如，在模块的依赖项中包含ngsanitize(不在核心的AngularJS中)。为了在你的模块的依赖项中使用ngsanitize，你需要包含“angular-sanitize.js”。js”在您的应用程序。 　　你也可...
ng-bind-html-unsafe的替代
weixin_34067980的博客
02-20 208
angular 1.2以后（或更早？）移除了ng-bind-html-unsafe，那么我要用这个directive来绑定html代码怎么办？随便一测试，它是不支持把html直接传给它的： //html <p ng-bind-html="m"></p> //js $scope.m="<b>text</b>"; ...
AngularJS1 -- ng-bind-html
住在地球的攻城狮
08-23 262
ng-bind-html指令可以安全地将包含 html的内容绑定到视图. ng-bind-html指令需要与angular-sanitize.js配合使用以检测危险代码. 当未引入angular-sanitize.js时 angular会报错提示不安全. 即使绑定变量中没有 html ，anguar依然会报错提示不安全. 无论绑定变量中有无 html ，angu...
angularjs中ng-bind-html解析文本
friend_ship的博客
09-03 803
渲染带html结构的字符串，使用ng-bind-html可以实现。 ng-bind-html的坑： ng-bind-html指令会在运行时过滤掉一些不安全的标签来防止xxs攻击，提高安全性。所以会导致字符串的某些标签如<button></button>,<input>等不显示。 解决方案： 1.在angularjs中默认是不相信添加的html内容，ng-...
ANGULARJS中用NG-BIND指令实现单向绑定的例子
10-25
在本文中，我们将深入了解AngularJS框架中的一个核心概念，即如何通过ng-bind指令实现数据的单向绑定。首先，我们需要简单介绍一下AngularJS框架的基本概念。 AngularJS是一个开源的JavaScript框架，由Google维护，...
ng-bind-html 和 ng-model同时使用
05-26
1. `ng-model` 绑定的是表单元素的值，例如 `input`、`select`、`textarea` 等，而 `ng-bind-html` 绑定的是 HTML 内容。 2. `ng-bind-html` 必须与 `$sce.trustAsHtml` 方法一起使用，以确保 HTML 内容被正确解析和...
详解Angularjs 如何自定义Img的ng-load 事件
10-20
var myApp = angular.module('myApp', []); myApp.directive('imageonload', function() { return { restrict: 'A', link: function(scope, element, attrs) { element.bind('load', function() { // 调用传递...
AngularJs directive详解及示例代码
11-22
例如，`ngBind`、`ng:bind`、`ng_bind`、`ng-bind`、`data-ng-bind`和`x-ng-bind`都是同一指令的不同写法。指令可以应用于元素、属性、类或注释中，提供极大的灵活性。 Directives的使用方式多种多样，如在HTML中，...
Angular实现on-done-typing指令，触发输入完成操作
6. **绑定数据和函数**：使用AngularJS的`ng-model`指令来绑定数据到视图模型，然后在自定义指令中绑定`done-typing`属性，其值为一个函数，该函数会在用户完成输入时被调用。 在给出的描述中，`done-typing="vm.do...
使用带有数组的 ng-bind
adiking520110的博客
12-27 145
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible"content="IE=edge" /> <meta...
动态加载指令时如何绑定事件(angularjs1)
飞翔的天空
06-22 408
       在directive的link中有一个$http请求，当请求完成后根据返回的值动态做element.append('......');这个操作，能显示没问题，如果动态组的HTML里面有ng-click等事件时，会发现显示出来的内容根本不执行ng-click绑定的方法！        这个是因为异步返回之后，指令的编译已经完成，因此需要动态编译。        使用$compi...
Angular动态绑定HTML文本
热门推荐
FE小白的进化之路
07-27 1万+
AngularJS中输出变量使用{{}}花括号或者ng-bind命令，在进行数据绑定时默认是以文本的形式输出，如果变量中有HTML标签的话，默认是不转义的，直接以标签的形式显示，这样防止了XSS脚本注入攻击。XSS攻击指的是通过对网页注入可执行客户端代码且成功地被浏览器执行，来达到攻击的目的，形成了一次有效XSS攻击，一旦攻击成功，它可能会获取到用户的一些敏感信息、改变用户的体验、诱导用户等非法行
Angular directive与数据绑定
YyoulingL的博客
03-15 323
[size=x-large]在Angular中，我们想要实现数据绑定，可以使用ng-model,也就是这样的形式：[/size] [code="html"] {{body}} [/code] [size=x-large]这样，在input中输入内容的时候，内容就会同步的在中展现出来。初次接触的时候感觉很神奇，感觉ng-model的背后隐藏了惊艳的魔法。[/size] [s...
angular 绑定html
weixin_36476401的博客
09-26 329
ng-class 与class 区别{ red:true,yellow:true } 与之相比更好控制样式 $scope.style='{color:red，backgroud：yellow}'{{style}} ng-style 与ng-href={{url}} ng-src='' $scope.url="www.baidu.com" $scope.src='img.s' ng
ng-bind-html 的使用
weixin_34034670的博客
02-04 291
AngualrJS 提供了指令ng-bind-html 用于绑定包含HTML标签的文档，使用方式： &lt;ANY ng-bind-html=""&gt; ... &lt;/ANY&gt; 测试案例： index.html &lt;div ng-controller="TestCtrl"&gt; &lt;div&gt; ...
ng-bind-html和.$compile的使用
isxixi的博客
07-20 1637
1.ng-bind-html的使用ng-bind-html:可以插入带标签的字符串。但是需要配合$sce使用。（缺点：标签里面不能带有angular的指令）2.$compile的使用：可以解决插入带有angular指令的字符串。通过compile服务可以编译html字符串或dom对象或jqLite对象，然后得到一个编译函数，再传入compile服务可以编译html字符串或dom对象或jqLite对象
Angular 怎样绑定 Html
wuchangjian的专栏
01-23 1771
转载自  http://www.ngui.cc/index.html 我正在编写一个Angular应用程序，并且我想要显示一个HTML响应。我怎么做？如果我简单地使用绑定语法 ，{{myVal}}会显示所有html标签。 我需要以某种方式将div的内部html绑定到变量值。 那就是以下这种方式 angular 教程网 http://www.ngui.cc
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值