怎样动态绑定HTML并绑定到页面DOM显示

最新推荐文章于 2023-05-10 18:29:46 发布

云南仟龙Mark

最新推荐文章于 2023-05-10 18:29:46 发布

阅读量335

点赞数

文章标签：数据库 html

原文链接：https://blog.51cto.com/u_15111999/3862656

版权

今天分享下”怎样动态绑定HTML并绑定到页面DOM显示“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。在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安全难题，

在angular中默认设置是不敢相信加上的HTML内容，针对加上的HTML内容，最先务必运用 $s c e . t r u s t A s H t m l ，告知 a n g u l a r 这也是可靠的 H T M L 内容。不然你可能获得$ sce:unsafe的出现异常不正确。

Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.
1.
下面是一个绑定简单的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”, [" $s c e ", f u n c t i o n ($ 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：

change 1. 2. 3. 4. 5. JavaScript：

angular.module(“com.ngbook.demo”, [])
.directive(“dyCompile”, [" $c o m p i l e ", f u n c t i o n ($ compile) {
return {
replace: true,
restrict: ‘EA’,
link: function(scope, elm, iAttrs) {
var DUMMY_SCOPE = {
$KaTeX parse error: Expected 'EOF', got '}' at position 43: \dots }̲, \dots$ destroy();
};

            iAttrs.$observe("html", function(html) {
                if (html) {
                    destroyChildScope(http://www.qlyl1688.com/products/ycxyym4953.html);
                    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。

今天的文章就分享到这啦，内容转自divcss5平台，下篇文章再见！