前言
在实际开发中，我们难免会遇到接口返回HTML代码直接绑定到页面上的情况。
- 最简单的方法就是使用ng-bind-html。
- 使用filter为HTML代码的添加自定义的内容。
- 自定义绑定HTML代码的directive，添加点击事件。
使用ng-bind-html
- 在ionic1中绑定HTML代码，最简单的方法就是使用ng-bind-html。
代码示例：
<div ng-bind-html="htmlString"></div>
- 有可能绑定上来后某些HTML代码不会生效，这时候再加上一个trustAsHtml的filter就好了。
代码示例：
.filter('trustedAsHtml', ['$sce', function ($sce) {
return function (htmlCode) {
return $sce.trustAsHtml(htmlCode);
};
}]);
<div ng-bind-html="htmlString|trustedAsHtml"></div>
修改绑定的HTML代码里面的内容
- 复杂一点的情况，需要绑定的HTML代码里面的内容可能不太符合我们实际开发时的需求。
- 比如说，img标签需要添加一些自定义的东西。
- 这个时候就需要我们自己写正则表达式去匹配内容并替换。
代码示例：
.filter('myFilter', function () {
return function (content) {
if (typeof content !== 'string') return content;
var re = /(<img\b)([^\>]+>)/gi;
return content.replace(re, "$1" + 'mycontent' + "$2");
}
});
trustedAsHtml filter必须放在最后
<div ng-bind-html="htmlString|myFilter|trustedAsHtml"></div>
为绑定的HTML代码添加点击事件
- 更复杂一点，为接口返回的HTML代码添加点击事件并响应。
- 例如，我们为绑定的HTML代码里面的img标签添加点击事件。
第一步
添加filter，为HTML代码里的img标签加上点击事件的字符串ng-click=picClicked($event)。
代码示例：
.filter('picAddEvent', function () {
return function (content) {
if (typeof content !== 'string') return content;
var re = /(<img\b)([^\>]+>)/gi;
return content.replace(re, "$1" + ' ng-click=picClicked($event) ' + "$2");
}
});
第二步
自定义封装绑定HTML的directive，响应点击事件，替换原来的ng-bind-html directive。
代码示例：
.directive('imcBindHtml', ['$sce', '$parse', '$compile', 'BigImageModalService', function ($sce, $parse, $compile, BigImageModalService) {
return {
restrict: 'E',
link: function ($scope, element, attr) {
angular.element(element).addClass('imc-bind-html');
$scope.$watch(attr.content, function () {
element.html($parse(attr.content)($scope));
$compile(element.contents())($scope);
// 图片点击事件
$scope.picClicked = function (event) {
var parent = angular.element(event.target).parent();
if (parent.is('a') && parent.attr('href') !== "") {
// img的父标签是a且href不为空时，点击图片时响应a标签的href事件，不响应该事件
return;
}
// TODO 响应点击图片事件操作
};
}, true);
}
}
}]);
第三步
使用imc-bind-html绑定HTML代码。
代码示例：
<imc-bind-html content="article.mobileContent|picAddEvent"></imc-bind-html>
