AngularJS动态绑定HTML的方法分析


Posted in Javascript onNovember 07, 2016

本文实例讲述了AngularJS动态绑定HTML的方法。分享给大家供大家参考,具体如下:

在Web前端开发中,我们经常会遇见需要动态的将一些来自后端或者是动态拼接的HTML字符串绑定到页面DOM显示,特别是在内容管理系统(CMS:是Content Management System的缩写),这样的需求,更是遍地皆是。

对于对angular的读者肯定首先会想到ngBindHtml,对,angular为我们提供了这个指令来动态绑定HTML,它会将计算出来的表达式结果用innerHTML绑定到DOM。但是,问题并不是这么简单。在Web安全中XSS(Cross-site scripting,脚本注入攻击),它是在Web应用程序中很典型的计算机安全漏洞。XSS攻击指的是通过对网页注入可执行客户端代码且成功地被浏览器执行,来达到攻击的目的,形成了一次有效XSS攻击,一旦攻击成功,它可能会获取到用户的一些敏感信息、改变用户的体验、诱导用户等非法行为,有时XSS攻击还会合其他攻击方式同时实施比如SQL注入攻击服务器和数据库、Click劫持、相对链接劫持等实施钓鱼,它带来的危害是巨大的,也是web安全的头号大敌。更多的Web安全问题,请参考wiki https://en.wikipedia.org/wiki/Cross-site_scripting%E3%80%82

在angular中默认是不相信添加的HTML内容,对于添加的HTML内容,首先必须利用$sce.trustAsHtml,告诉angular这是可信的HTML内容。否则你将会得到$sce:unsafe的异常错误。

Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.

下面是一个绑定简单的angular链接的demo:

HTML:

<div ng-controller="DemoCtrl as demo">
  <div ng-bind-html="demo.html"></div>
</div>

JavaScript:

angular.module("com.ngbook.demo", [])
  .controller("DemoCtrl", ["$sce", function($sce) {
    var vm = this;
    var html = '<p>hello <a href="https://angular.io/">angular</a></p>';
    vm.html = $sce.trustAsHtml(html);
    return vm;
  }]);

对于简单的静态HTML,这个问题就解决了。但对于复杂的HTML,这里的复杂是指带有angular表达式、指令的HTML模板,对于它们来说,我们不仅希望绑定大DOM显示,同时还希望得到angular强大的双向绑定机制。ngBindHhtml并不会和$scope关联双向绑定,如果在HTML中存在ngClick、ngHref、ngSHow、ngHide等angular指令,它们并不会被compile,点击这些按钮,也不会发生任何反应,绑定的表达式也不会在更新。例如尝试将上次的链接变为:ng-href=“demo.link”,链接并不会被解析,在DOM看见的仍然会是原样的HTML字符串。

在angular中的所有指令要生效,都需要经过compile,在compile中包含了pre-link和post-link,连接上特定行为,才能工作。大部分情况下compile,是会在angular启动时,自动compile的。但如果是对于动态添加的模板,则需要手动的compile。angular中为我们提供了$compile服务来实现这一功能。下面是一个比较通用的compile例子:

HTML:

<body ng-controller="DemoCtrl as demo">
  <dy-compile html="{{demo.html}}">
  </dy-compile>
  <button ng-click="demo.change();">change</button>
</body>

JavaScript:

angular.module("com.ngbook.demo", [])
  .directive("dyCompile", ["$compile", function($compile) {
    return {
      replace: true,
      restrict: 'EA',
      link: function(scope, elm, iAttrs) {
        var DUMMY_SCOPE = {
            $destroy: angular.noop
          },
          root = elm,
          childScope,
          destroyChildScope = function() {
            (childScope || DUMMY_SCOPE).$destroy();
          };
        iAttrs.$observe("html", function(html) {
          if (html) {
            destroyChildScope();
            childScope = scope.$new(false);
            var content = $compile(html)(childScope);
            root.replaceWith(content);
            root = content;
          }
          scope.$on("$destroy", destroyChildScope);
        });
      }
    };
  }])
  .controller("DemoCtrl", [function() {
    var vm = this;
    vm.html = '<h2>hello : <a ng-href="{{demo.link}}">angular</a></h2>';
    vm.link = 'https://angular.io/';
    var i = 0;
    vm.change = function() {
      vm.html = '<h3>change after : <a ng-href="{{demo.link}}">' + (++i) + '</a></h3>';
    };
  }]);

这里创建了一个叫dy-compile的指令,它首先会监听绑定属性html值的变化,当html内容存在的时候,它会尝试首先创个一个子scope,然后利用$compile服务来动态连接传入的html,并替换掉当前DOM节点;这里创建子scope的原因,是方便在每次销毁DOM的时,也能容易的销毁掉scope,去掉HTML compile带来的watchers函数,并在最后的父scope销毁的时候,也会尝试销毁该scope。

因为有了上边的compile的编译和连接,则ngHref指令就可以生效了。这里只是尝试给出动态compile angular模块的例子,具体的实现方式,请参照你的业务来声明特定的directive。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
javascript英文日期(有时间)选择器
May 02 Javascript
jQuery参数列表集合
Apr 06 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
vue router返回到指定的路由的场景分析
Nov 10 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 #Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 #Javascript
jquery文字填写自动高度的实现方法
Nov 07 #Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 #Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 #Javascript
vue.js初学入门教程(2)
Nov 07 #Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 #Javascript
You might like
PHP中实现图片的锐化
2006/10/09 PHP
PHP循环获取GET和POST值的代码
2008/04/09 PHP
php全排列递归算法代码
2012/10/09 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
JavaScript入门之基本函数详解
2011/10/21 Javascript
document.write的几点使用心得
2014/05/14 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
shiro授权的实现原理
2017/09/21 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
AngularJs 终极购物车(实例讲解)
2017/11/08 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
详解JS预解析原理
2020/06/16 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
python中partial()基础用法说明
2018/12/30 Python
python实现的自动发送消息功能详解
2019/08/15 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
中餐厅主管的职责范文
2014/02/04 职场文书
统计学教授推荐信
2014/09/18 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android
python ConfigParser库的使用及遇到的坑
2022/02/12 Python