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代码。

代码示例：