In an Angular app, is it possible to somehow intercept all clicks on links (or all links within the scope of a particular controller's view)? For example, if I want to intercept all clicks on links, and block clicks on youtube links, can this be done?

Ideally I'd prefer not to have to add any custom attributes or use a custom element to achieve this, i.e. the links should look just like regular HTML links.

In an Angular app, is it possible to somehow intercept all clicks on links (or all links within the scope of a particular controller's view)? For example, if I want to intercept all clicks on links, and block clicks on youtube links, can this be done?

Ideally I'd prefer not to have to add any custom attributes or use a custom element to achieve this, i.e. the links should look just like regular HTML links.

• javascript
• angularjs

• how you add your html with links? where you get links? – Grundy Commented Nov 27, 2015 at 10:13
• @Grundy I add the links to the HTML view with <a> tags – Little Bobby Drop Tables Commented Nov 27, 2015 at 10:18
• 1 Add an on-click function to the anchor tags. Or use the document.addEventListener to listen for all clicks, then do some logic for listening to anchor tags or YouTube links. – user5250554 Commented Nov 27, 2015 at 10:18
• i mean href for this <a> you add tag angular, you really use angular? can you provide sample your js and html? if you know href for links - you can just remove it by some condition – Grundy Commented Nov 27, 2015 at 10:19
• @Grundy Yes, I'm really using Angular, the links are just normal HTML links, e.g. <a href="http://youtube.">I am a link</a> – Little Bobby Drop Tables Commented Nov 27, 2015 at 10:31

3 Answers 3

With angular, you can add a directive for the element <a> and add a listener on click

app.directive('a', function() {
    return {
        restrict: 'E', // only Elements (<a>),
        link: function(scope, elm, attr) {
            // every time you click on the link
            elm.on('click', function($event) {
                console.log('event')
                $event.preventDefault()
                return false
            })
        }
    }
})

and Tada!

Now, if you want to block some URLs, you can access the href element inside the link function via attr.href, so you would do it this way:

app.directive('a', function() {
    return {
        restrict: 'E', // only Elements (<a>),
        link: function(scope, elm, attr) {
            // every time you click on the link
            elm.on('click', function($event) {
                // only some URLs
                if(attr.href.match(/youtube\./)) {
                    $event.preventDefault()
                    return false
                }
            })
        }
    }
})

This solution uses vanilla JS:

document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll('a').forEach(a => {
    a.addEventListener("click", (event) => {
      event.preventDefault(); // Block the page from loading
      alert(a.href); // Show an alert with the url in the href
    })
  })
});

<a href="https://stackoverflow.">Click me</a>

I made a sample for that, based on jQuery.

// Contents, Controls or document ready 
$(document).ready(function(){
  $('.block').find('a').each ( function(){
      $(this).click(function(){
      	  console.log('custom-action');
          return false;
      });
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block">
    <div><a href="http://naver." target="_blank">OK</a></div>
</div>