Angular动态绑定HTML文本

AngularJS中输出变量使用{{}}花括号或者ng-bind命令，在进行数据绑定时默认是以文本的形式输出，如果变量中有HTML标签的话，默认是不转义的，直接以标签的形式显示，这样防止了XSS脚本注入攻击。XSS攻击指的是通过对网页注入可执行客户端代码且成功地被浏览器执行，来达到攻击的目的，形成了一次有效XSS攻击，一旦攻击成功，它可能会获取到用户的一些敏感信息、改变用户的体验、诱导用户等非法行为。

AngularJS提供了ng-bind-html指令来动态绑定HTML文本，angular默认是不相信绑定的HTML文本的，对于绑定的HTML文本，必须利用$sce.trustAsHtml()方法告诉angular是可信的HTML文本，否则会报$sce:unsafe异常错误。

下面是一个绑定简单HTML文本的方法

1、引入angular-sanitize模块

var demo = angular.module('demoApp', ['ngSanitize'])

2、控制器

demo.controller('DemoCtrl', ['$scope', 'DemoService', function ($scope, DemoService) {$scope.content = '<p>这是一段HTML文本</p>';
}

3、视图

<section ng-controller="DemoCtrl"><div ng-bind-html="content | htmlTrusted"></div>
</section>

4、过滤器htmlTrusted，$sce是angularJS自带的安全处理模块$sce，trustAsHtml方法便是将数据内容以html的形式进行解析并返回

demo.filter('htmlTrusted', function ($sce) {return function (html) {return $sce.trustAsHtml(html)}});

对于简单的HTML文本，就可以解决了。但是对于复杂的HTML片段，复杂是指HTML片段带有angular表达式或指令，ngBindHhtml将不会解析。ngBindHhtml不会和$scope关联双向绑定，如果在HTML中存在ngClick、ngHref、ngSHow、ngHide等angular指令，它们并不会被compile，点击这些按钮，也不会发生任何反应，绑定的表达式也不会在更新。

在angular中的所有指令要生效，都需要经过compile，大部分情况下compile，是会在angular启动时，自动compile的，但如果是对于动态添加的模板，则需要手动的compile，我们可以采用angular的$compile服务实现这一功能。

<div html-dynamic="content">

  demo.directive('htmlDynamic', function ($compile) {return {restrict: 'A',replace: true,link: function (scope, ele, attrs) {scope.$watch('isDomComplete', function (val) {if (val) {scope.$watch(attrs.htmlDynamic, function(html) {ele.html(html);$compile(ele.contents())(scope);});}});}};});

这里创建了一个html-dynamic指令，它会监听绑定属性html值的变化，当html内容存在的时候，利用$compile服务来动态给当前的作用域传入html，并替换掉当前DOM节点。这样HTML片段中的表达式或指令就生效了，希望本文为大家了解AngularJS有所帮助。

Angular动态绑定HTML文本相关推荐

Angular中数据文本绑定、绑定Html、绑定属性、双向数据绑定的实现方式
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
angular封装富文本编辑器指令
这个富文本编辑器的基本用法可以去该编辑器作者的github看下 (https://github.com/echosoar/medit) html代码和css 原版: 改版的: /*富文本编辑器*/#m ...
Angular 2.0 文本拖拽
基于Angular7.1和TypeScript实现 Html代码 <div style="padding-left: 0px;"><div id='content ...
slate-angular 正式开源
本文由智能化研发管理工具PingCode前端工程师杨振兴分享一句话介绍 slate-angular 是一个基于 Angular 和 Slate.js 的编辑器视图层,帮助开发者使用 Angula ...
前端知识总结汇总！（HTML、CSS、JS、jQuery、vue、微信小程序）
前端知识总结汇总!(HTML.CSS.JS.jQuery.vue.微信小程序) 前端理论考核题 1 / HTML 1.DOCTYPE 的作用是什么?标准模式与兼容模式各有什么区别? !DOCTYPE是 ...
svelte 学习记录(一)
svtelte 是一款更小.更轻量的框架,比现在的三大框架都更轻量,但是应用不广泛.之中的利弊可以移步知乎等论坛 https://www.zhihu.com/question/53150351 Hel ...
vue面试题（day06）
文章目录前言请谈谈WXML与标准的html的异同? 请谈谈WXSS和CSS的异同? 请谈谈微信小程序主要目录和文件的作用? 请谈谈小程序的双向绑定和vue的异同? 简单描述下微信小程序的相关文件类 ...
小程序全面基础知识归纳
一.基础要点 1.文件结构 1-1 page.json全局配置 | 微信开放文档 app.json 是当前小程序的全局配置,包括了小程序的所有页面路径.界面表现.网络超时时间.底部tab等.普通快速启 ...
android 富文本编辑器_富文本编辑器，还是Tinymce好一点？Angular/Vue集成最新版
以前jQuery.PC网页时代,富文本编辑器一直就是百度Ueditor.KindEditor.现在使用Angular.Vue.React等MVVM架构以及最新的大前端工程模式下,老的编辑器显然不更新 ...

Angular动态绑定HTML文本

Angular动态绑定HTML文本相关推荐

最新文章

热门文章