Angular 1.x - 向自定义指令中的元素添加事件侦听器答案

【问题标题】：Angular 1.x - adding event listeners to elements inside custom directiveAngular 1.x - 向自定义指令中的元素添加事件侦听器
【发布时间】：2017-04-04 03:59:54
【问题描述】：

我在 Angular 应用程序中有一个指令，我从后端发送文本，我只是在前端显示它，如下所示：

<article-text ng-bind-html="article.text" class="article-text"></article-text>

由于这是一个离子应用程序，我需要为文本中的每个a tag 添加一个单击事件侦听器，以便我可以在系统浏览器中而不是在应用程序中打开 url：那就是点击功能：

openExternal(elem) {
    window.open(elem.href, "_system");
    return false;
}

但是，不确定如何获取指令中的所有元素并添加事件侦听器？

这是我的尝试：

.directive('articleText', function() {
return {
    restrict: 'E',
    link: function(scope, element, attr) {
      var links = element[0].querySelectorAll('a');
      angular.forEach(links, function(link) {
        link.bind('click', function() {
          window.open(this.href, "_system");
          return false;
         });
      });
    }
  };
});

但是，这行不通。我得到一个空数组：

var links = element[0].querySelectorAll('a');
console.log(links);

节点列表[0] 长度：0

【问题讨论】：

标签： javascript angularjs ionic-framework

【解决方案1】：

我得到一个空数组：

var links = element[0].querySelectorAll('a');
console.log(links);

选择器查询没有找到<a>标签，因为在选择器查询执行时html还没有被渲染。

使用$watch等待来自服务器的html数据的到来。

angular.module("myApp").directive('articleText', function() {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      //USE $watch
      scope.$watch(attrs.ngBindHtml, function(value) {
        var links = element.find('a');
        console.log(links);
        links.on('click', function(e) {
            e.preventDefault();
            window.open(this.href, "_system");
            return false;
        });
      });
    }
  };
});

DEMO on PLNKR

【讨论】：