Question

我在角度应用程序中有一个指令，我从后端发送文本，我只是在这样的前端显示它：

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

因为这是一个离子应用程序，我需要在文本中为每个a tag添加一个click事件监听器，这样我就可以在系统浏览器中而不是在应用程序内部打开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

Answer 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

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

1 个答案: