当前位置: 首页 > 编程笔记 >

深入理解AngularJS中的ng-bind-html指令

戚翼
2023-03-14
本文向大家介绍深入理解AngularJS中的ng-bind-html指令,包括了深入理解AngularJS中的ng-bind-html指令的使用技巧和注意事项,需要的朋友参考一下

前言

在为html标签绑定数据的时,如果绑定的内容是纯文本,你可以使用{{}}或者ng-bind。但在为html标签绑定带html标签的内容的时候,angularjs为了安全考虑,不会将其渲染成html,而是将其当做文本直接在页面上展示。

先来看一个例子

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <script src="js/angular.min.js"></script>
 <script>
 angular.module("myapp", []).controller("MyController", function ($scope) {
 $scope.content = "<h1>Hello world.</h1>";
 $scope.txt = "Hello txt world";
 });
 </script>
</head>
<body ng-app="myapp">
 <div ng-controller="MyController">
 {{content}}
 <div ng-bind="content"></div> 
 </div>
</body>
</html>

输出

ng-bind-html指令

 <div ng-bind-html="content"></div>

这时就会出现安全的错误,如图:

但可以通过引入下面的模块,自动检测html的内容是否安全

 <script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script>

 <script>
 angular.module("myapp", ["ngSanitize"]).controller("MyController", function ($scope) {
 $scope.content = "<h1>Hello world.</h1>";
 $scope.txt = "Hello txt world";
 });
 </script>

这时刷新预览

所以

ng-bind-html 指令是通一个安全的方式将内容绑定到 HTML 元素上。

当你想让 AngularJS 在你的应用中写入 HTML,你就需要去检测一些危险代码。通过在应用中引入 "angular-santize.js" 模块,使用 ngSanitize 函数来检测代码的安全性。 in your application you can do so by running the HTML code through the ngSanitize function.

另外一种处理方式

通过自定义过滤器,将带html标签的内容都当成安全的进行处理。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <script src="js/angular.min.js"></script>
 <!--<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script>-->
 <script>
 angular.module("myapp", []).controller("MyController", function ($scope) {
  $scope.content = "<h1>Hello world.</h1>";
  $scope.txt = "Hello txt world";
 }).filter("safeHtml", function ($sce) {
  return function (input) {
  //在这里可以对加载html渲染后进行特别处理。
  return $sce.trustAsHtml(input);
  };
 });
 </script>
</head>
<body ng-app="myapp">
 <div ng-controller="MyController">
 {{content}}
 <div ng-bind="content"></div> 
 <!--<div ng-bind-html="content"></div>-->
 <div ng-bind-html="content|safeHtml"></div>
 </div>
</body>
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对小牛知识库的支持。

 类似资料:
  • 问题内容: 我曾经能够用来输出未经消毒的代码(因为消毒发生在服务器端)。 但是现在这个选择消失了吗?我知道我可以使用,但是当不安全易于使用时,将其添加到整个JavaScript上将是一个巨大的痛苦。 我怎么不安全回来? 问题答案: 好吧,仅创建您自己的指令非常简单,这是一个示例。 指令 : 用法 : 演示: http ://jsfiddle.net/cC5VZ/2

  • 问题内容: plnkr链接 我有一个我想将html绑定到它的元素。 这样可行。现在,连同它,我还有一个绑定到绑定的html的指令: 但是带有div和anchor 的指令不求值。我该如何运作? 问题答案: 我也遇到了这个问题,经过几个小时的互联网搜索,我读到了@Chandermani的评论,事实证明这是解决方案。您需要使用以下模式调用“编译”指令: HTML: JS: 您可以在这里看到它的工作提琴

  • 问题内容: 我想知道ng-bind-html和bind-html-compile指令之间的区别。例如我给 到ng-bind-html,这会剔除bind-html-compile所没有的样式。我可以知道何时应该使用每个指令。谢谢。 问题答案: bind-html-compile 不是标准的Angular指令,它带有模块https://github.com/incuna/angular- bind-h

  • 问题内容: 我有一种情况,我想在创建的DOM上运行自定义指令。 基本上,我必须自定义html标记的行为,因为正在加载的html是不安全的,并且当用户单击链接时,我必须在jqLit​​e事件发生之前执行某些功能。 因此,我最初的想法是创建一个指令,该指令会修改我放置指令属性的容器内部任何容器的行为。 正常工作,直到与结合使用,我的指令在将字符串编译为html并附加到DOM 之前运行。 那么,在运行之

  • 本文向大家介绍深入理解Angularjs中的$resource服务,包括了深入理解Angularjs中的$resource服务的使用技巧和注意事项,需要的朋友参考一下 一、$resource服务介绍 $http服务提供的实现极为简单和低级,可以用来发送XHR请求,同时它还为你提供了很大的可控性和灵活性。但是,在大多数情况下,我们需要处理对象,以及封装了特定属性和方法的对象模型,例如一个person

  • 问题内容: 我正在使用angularjs 1.2.0-rc.3。我想将html代码动态地包含到模板中。为此,我在控制器中使用: 在模板中,我得到了: 它适用于常规html代码。但是,当我尝试放置角度模板时,它不会被解释,它仅包含在页面中。例如,我想包括: 非常感谢 问题答案: 此解决方案不使用硬编码模板,您可以编译嵌入在API响应中的Angular表达式。 步骤1. 安装此指令:https : /

  • 问题内容: 我想显示“附件”部分的表格格式。我有查询和结果数据。两者都有一个共同的列。我想显示基于ID的附件类别描述。在我尝试过的尝试中,它没有用。 我在中使用一个函数,希望方法错误,期望该方法有一个替代方案。 该包含, 和来自数据库的数据一样, HTML代码为 控制器的代码是 样本柱塞:http ://plnkr.co/edit/dZy5gW4q9CxWF2NszXYc 问题答案: 括号是否经过

  • 问题内容: 我正在尝试使用provider和指令来允许我的控制器将HTML注入DIV。 但是,我无法使其正常工作。 我发现这是因为它已从AngularJS中删除(谢谢)。 但是没有,我得到这个错误: http://errors.angularjs.org/undefined/$sce/unsafe 问题答案: 您需要确保已加载sanitize.js。例如,从https://ajax.googlea