перехватывает клики по ссылкам

Question

В приложении с угловым, возможно ли каким-то образом перехватить все клики по ссылкам (или всем ссылкам в пределах области зрения конкретного контроллера)? Например, если я хочу перехватить все клики по ссылкам и заблокировать клики по ссылкам на YouTube, можно ли это сделать?

В идеале я бы предпочел не добавлять какие-либо пользовательские атрибуты или использовать пользовательский элемент для достижения этого, то есть ссылки должны выглядеть так же, как обычные ссылки HTML.

Answer 1

С угловой, вы можете добавить директиву для элемента <a> и добавить слушателя на 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 
      }) 
     } 
    } 
}) 

и Тада!

Теперь, если вы хотите, чтобы блокировать некоторые URL-адреса, вы можете получить доступ к HREF элемента внутри функции связи через attr.href, поэтому вы могли бы сделать это следующим образом:

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\.com/)) { 
        $event.preventDefault() 
        return false 
       } 
      }) 
     } 
    } 
}) 

Answer 2

Я сделал образец для этого, основываясь на jQuery.

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

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