ioinc页面加载前绑定_ionic1开发之为绑定的HTML代码添加事件

前言

在实际开发中，我们难免会遇到接口返回HTML代码直接绑定到页面上的情况。

最简单的方法就是使用ng-bind-html。

使用filter为HTML代码的添加自定义的内容。

自定义绑定HTML代码的directive，添加点击事件。

使用ng-bind-html

在ionic1中绑定HTML代码，最简单的方法就是使用ng-bind-html。

代码示例：

有可能绑定上来后某些HTML代码不会生效，这时候再加上一个trustAsHtml的filter就好了。

代码示例：

.filter('trustedAsHtml', ['$sce', function ($sce) {

return function (htmlCode) {

return $sce.trustAsHtml(htmlCode);

};

}]);

修改绑定的HTML代码里面的内容

复杂一点的情况，需要绑定的HTML代码里面的内容可能不太符合我们实际开发时的需求。

比如说，img标签需要添加一些自定义的东西。

这个时候就需要我们自己写正则表达式去匹配内容并替换。

代码示例：

.filter('myFilter', function () {

return function (content) {

if (typeof content !== 'string') return content;

var re = /(]+>)/gi;

return content.replace(re, "$1" + 'mycontent' + "$2");

}

});

trustedAsHtml filter必须放在最后

为绑定的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 = /(]+>)/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代码。

代码示例：