在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。

动态绑定HTML的更多相关文章

  1. .Net mvc 根据前台参数动态绑定对象

    业务需求:根据前台界面的参数,动态绑定对象 <param name="colNames">属性名拼接字符串</param><param name=&q ...

  2. Java的动态绑定机制

    Java的动态绑定又称为运行时绑定.意思就是说,程序会在运行的时候自动选择调用哪儿个方法. 一.动态绑定的过程: 例子: public class Son extends Father Son son ...

  3. java动态绑定的一点注意

    动态绑定只是针对对象的方法,对于属性无效.因为属性不能被重写. show me code: public class Father{ public String name = "父亲属性&q ...

  4. Vue.js 动态绑定class

    Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据.被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新 ...

  5. OC 动态类型,动态绑定,动态加载

    OC 动态类型,动态绑定,动态加载 Objective-C具有相当多的动态特性,基本的,也是经常被提到和用到的有 动态类型(Dynamic typing) 动态绑定(Dynamic binding) ...

  6. 深入理解OOP(三):多态和继承(动态绑定和运行时多态)

    在前面的文章中,我们介绍了编译期多态.params关键字.实例化.base关键字等.本节我们来关注另外一种多态:运行时多态, 运行时多态也叫迟绑定. 深入理解OOP(一):多态和继承(初期绑定和编译时 ...

  7. Silverlight TreeView 动态绑定Xml 文件

      随着应用程序的不断升级,客户的需求不断增多,程序员不得不对自己的应用程序做出相应的修改,如果修改的内容较多,那么就必须找出一种简便方法,下面就为大家介绍一下在SilverLight 中左边导航栏T ...

  8. 深入理解C++的动态绑定和静态绑定【转】

    转自:http://blog.csdn.net/chgaowei/article/details/6427731 为了支持c++的多态性,才用了动态绑定和静态绑定.理解他们的区别有助于更好的理解多态性 ...

  9. 将事件绑定在html标签中和js动态绑定的区别

    一:绑定在标签中: 能够一眼看出那些元素绑定了什么事件. 只能将元素和事件逐一实现绑定. 二js动态绑定: 可以一次动态的给多个元素绑定事件,批量绑定事件. html标签绑定的缺点: ①:可能有时间差 ...

随机推荐

  1. 安装完ODAC，出现ORA-12560:TNS:协议适配器错误 12541 无监听程序的解决

    进入系统环境变量设置,查看Path路径,发现D:\oracle\product\11.2.0\client_1等路径放到了oracle11g数据库路径前面,将新加入的路径置后即可解决ORA-12560 ...

  2. html5 上传头像的裁剪

    本示例使用HTML5 canvas,简单的编写了上传头像的裁剪效果,移动端支持拖拽后裁剪, 虽然样式不好看,但是功能还算全: 下图为裁剪后的效果: html部分: <!DOCTYPE html& ...

  3. unity 实现物体破碎效果的一些方法

    游戏越来越接近现实的感觉,如果有一个真是的 虚拟现实设备,可能我们真的会感觉是在真实世界.场景的逼真是在渲染效果.角色AI.游戏逻辑.物理效果等等一起导致的结果.现在游戏越来越大,除了渲染,物理估计是 ...

  4. 1813. M进制数问题

    1813. M进制数问题 Constraints Time Limit: 1 secs, Memory Limit: 32 MB Description 试用 C++的类来表示一般进制数. 给定 2 ...

  5. http statusCode(状态码) 200、300、400、500序列

    201-206都表示服务器成功处理了请求的状态代码,说明网页可以正常访问.        200(成功)  服务器已成功处理了请求.通常,这表示服务器提供了请求的网页.        201(已创建) ...

  6. 七个高效的文本编辑习惯（以Vim为例）

    七个高效的文本编辑习惯 如果你花很多时间输入纯文本.写程序或HTML,那么通过高效地使用一个好的编辑器,你可以节省大部分时间.本文将提供指导和提示,让你更迅速地做这些工作,并且少犯错误. 本文用开源文 ...

  7. codeIgniter怎么实现对input type=text对话框blur事件的监听以及传值？

    如题,这个问题怎么解决? 用JS和前端框架习惯了,现在学后端框架,感觉各种坑...

  8. awk用法总结笔记

    +  : 匹配1或多次出现的字符或正则表达式  awk '/col+/' testfile ?  : 匹配0或1次出现的字符或正则表达式    awk '/col+/' testfile |  : 匹 ...

  9. 数据库软件dbForge Studio for MySQL更新至v.6.1

    本文转自:慧都控件网 说到MariaDB,这个数据库算是MySQL的一个分支.现在非常的流行,很多地方都能看到它的身影.MariaDB作为一种新的数据库管理系统,在短时间内获得如此高的关注度.这也是D ...

  10. bdb log为什么 有 region buffer 和 log cursor buf

    对bdb log来说, 在共享内存中 有一块 buffer, 同时每一个 log cursor 都自带一个 malloc的buf. why? 我认为: region buffer存的是log最末尾, ...