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

Question

I have an AngularJS application. A requirement has come up where I have to track whenever a user clicks on an external link ( <a href="http://some-other-site.com/offers">click here for offers</a> ).

Normally in jQuery I would write something like the following:

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

But, I'm trying to avoid using jQuery and do things the Angular way. But what is the best way to handle this in pure Angular? I don't want to resort to putting ng-click's on all the external links, as these will constantly change as new functionality is added.

Answer 1

You can set a directive directly on the a tag to ensure all a tags within your application get the directive attached to them.

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

Answer 2

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

Answer 3

I'm late to the party but I would like to put your question in another perspective:

What is the "angular way" in this context?

I was asking myself the same questions and I came up witch following conclusion:

• " Angular way " is not the opposite of " jQuery way " simply because jQuery is not a framework (jQuery is something every developer wonders why it's not the default in every browser)
• I should go the " Angular way " always when the task is to change the model data in the application

In your case tracking should be added to external links so I assume no application related data is affected by this change. In this case I would go with a solution which is the easiest to maintain (because we all know that later someone will want either to remove the tracking or add another tracking or both).

1) As already mentioned in the comments, there is pure js way to do it:

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) And one another angular solution:

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

The only difference to the already posted answer is that you use this directive as an attribute:

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

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