Question

我有一个AngularJS应用程序。我需要在用户点击外部链接（<a href="http://some-other-site.com/offers">click here for offers</a>）时进行跟踪。

通常在jQuery中我会写如下内容：

$(document).on('click', 'a[href^="http://"]', function() {
    // perform tracking here
    return true;
});

但是，我试图避免使用jQuery并以Angular的方式做事。但是在纯Angular中处理这个问题的最佳方法是什么？我不想在所有外部链接上使用ng-click，因为随着新功能的添加，这些链接会不断变化。

Answer 1

您可以直接在 a 标记上设置指令，以确保应用程序中的所有 a 标记都附加了指令。

.directive('a', function () {
    return {
         restrict: 'E',
         link: function (scope, elem, attrs) {
              // your code here
         }
    }
})

Answer 2

创建一个匹配<a>元素的元素指令，并在那里添加一个点击处理程序。

Answer 3

我迟到了，但我想以另一种观点提出你的问题：

＆＃34;角度方式＆＃34;是什么？在这种情况下？

我问自己同样的问题，然后我得出结论：

＆＃34; Angular way ＆＃34;并不是＆＃34; jQuery方式＆＃34;仅仅是因为 jQuery不是一个框架（jQuery是每个开发人员的东西想知道为什么它不是每个浏览器的默认设置）
我应该去＆＃34; Angular方式＆＃34;总是在任务是改变应用程序中的模型数据时

在您的情况下，应将跟踪添加到外部链接，因此我假设此更改不会影响与应用程序相关的数据。在这种情况下，我会使用最容易维护的解决方案（因为我们都知道以后有人会想要删除跟踪或添加其他跟踪，或两者兼而有之。）

1）正如评论中已经提到的那样，有纯粹的js方法可以做到：

var externalLinks = document.querySelectorAll('a[href^="http://"]');
for (i = 0; i < externalLinks.length; ++i) {
    var link = externalLinks[i];
    link.addEventListener('click', function(e) {
        // track me
    });
}

http://jsfiddle.net/a7fg217h/1/

2）另一个角度解决方案：

.directive('extLink', function() {
  return {
    restrict: 'A',
    link: function(scope, elem) {
      console.log(elem);
      elem.bind('click', function(e) {
        console.log(e);
      });
    }
  };
})

与已发布的答案的唯一区别在于您将此指令用作属性：

<a ext-link href="http://google.com">Link</a>

http://plnkr.co/edit/OhPfEzwDK3j4d17O86oo?p=preview

Angular JS - 将onclick事件附加到页面上的所有链接

3 个答案: