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%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程序设计有所帮助。
相关文章
在AngularJS中主要使用$http服务与远程http服务器交互，本篇文章主要介绍了AngularJS中$http使用的简单介绍，非常具有实用价值，需要的朋友可以参考下。2017-03-03
这篇文章主要介绍了AngularJS实现的锚点楼层跳转功能,涉及AngularJS事件响应实现锚点跳转功能的相关操作技巧,需要的朋友可以参考下2018-01-01
本文主要介绍AngularJS ng-open 指令,这里帮大家整理了ng-open指令的基本资料,有需要的小伙伴可以参考下2016-08-08
这篇文章主要介绍了Angular 多级路由实现登录页面跳转(小白教程)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了AngularJS实现表单验证，客户端表单验证是AngularJS里面最酷的功能之一。AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单，对AngularJS表单验证感兴趣的小伙伴们可以参考一下2015-12-12
AngularJS中的$parse服务与$eval服务用法实例
这篇文章主要介绍了AngularJS中的$parse服务与$eval服务用法,结合实例形式分析了AngularJS中$parse服务与$eval服务的功能、使用方法与相关注意事项,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了SpringMVC简单整合Angular2的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
本文主要介绍AngularJs concepts，这里整理了详细资料及简单示例代码来讲解相关知识，有学习这部分知识的朋友可以参考下2016-09-09
$scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的 $scope 发生改变时也会立刻重新渲染视图.2016-08-08
这篇文章主要介绍了AngularJS中watch监听用法,较为详细的分析了$watch的具体功能、相关参数用法与使用注意事项,需要的朋友可以参考下2016-11-11
最新评论