AngularJS动态绑定HTML的方法分析  更新时间:2016年11月07日 10:17:01   作者:破狼   这篇文章主要介绍了AngularJS动态绑定HTML的方法,结合实例形式分析了AngularJS实现动态绑定HTML的相关操作指令用法与使用注意事项,需要的朋友可以参考下 本文实例讲述了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 在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: JavaScript: angular.module(“com.ngbook.demo”, []) .controller(“DemoCtrl”, [“$sce”, function($sce) { var vm = this; var html = ‘hello angular’; 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: change 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 = ‘hello : angular’; vm.link = ‘https://angular.io/’; var i = 0; vm.change = function() { vm.html = ‘change after : ‘ + (++i) + ”; }; }]); 这里创建了一个叫dy-compile的指令,它首先会监听绑定属性html值的变化,当html内容存在的时候,它会尝试首先创个一个子scope,然后利用$compile服务来动态连接传入的html,并替换掉当前DOM节点;这里创建子scope的原因,是方便在每次销毁DOM的时,也能容易的销毁掉scope,去掉HTML compile带来的watchers函数,并在最后的父scope销毁的时候,也会尝试销毁该scope。 因为有了上边的compile的编译和连接,则ngHref指令就可以生效了。这里只是尝试给出动态compile angular模块的例子,具体的实现方式,请参照你的业务来声明特定的directive。 希望本文所述对大家AngularJS程序设计有所帮助。 您可能感兴趣的文章: 详解Angular.js数据绑定时自动转义html标签及内容 Angular4绑定html内容出现警告的处理方法 AngularJS 动态绑定 HTML 相关文章 基于AngularJS实现表单验证功能 这篇文章主要为大家详细介绍了基于AngularJS实现表单验证功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-07-07 AngularJS路由Ui-router模块用法示例 这篇文章主要介绍了AngularJS路由Ui-router模块用法,结合实例形式分析了Ui-router模块的功能、使用方法及相关注意事项,需要的朋友可以参考下 2017-05-05 AngularJS基础 ng-keyup 指令简单示例 本文主要介绍AngularJS ng-keyup 指令,这里对ng-keyup指令的基本资料进行了整理,并且附有代码示例,有需要的朋友可以看一下 2016-08-08 angularjs基础教程 AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。 2014-12-12 Angular4 中常用的指令入门总结 这篇文章主要给大家总结了一些关于Angular4 中入门常用的指令,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来跟着小编一起学习学习吧。 2017-06-06 ANGULARJS中用NG-BIND指令实现单向绑定的例子 这篇文章主要介绍了ANGULARJS中用NG-BIND指令实现单向绑定的例子,本文简单介绍AngularJS框架后,用一个实例演示{{}}插值法和ng-bind指令的使用,需要的朋友可以参考下 2014-12-12 angular 组件通信的几种实现方式 这篇文章主要介绍了angular 组件通信的几种实现方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-07-07 AngularJS入门教程之控制器详解 本文主要介绍 AngularJS控制器,这里对 AngularJS控制器的知识详细讲解,并提供实例代码有需要的小伙伴可以参考下 2016-07-07 Angular.js与Bootstrap相结合实现手风琴菜单代码 这篇文章主要介绍了Angular.js与Bootstrap相结合实现手风琴菜单的相关资料,需要的朋友可以参考下 2016-04-04 angularjs学习笔记之完整的项目结构 这篇文章主要介绍了angularjs学习笔记之完整的项目结构的相关资料,需要的朋友可以参考下 2015-09-09 最新评论

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

  • 详解Angular.js数据绑定时自动转义html标签及内容
  • Angular4绑定html内容出现警告的处理方法
张贴在3