How to avoid firing an onclick() event fired when clicking a link in AngularJS

Question

First of all, I want to say that I have seen some topics already with similar question. I have tried withe the responses of these topics, but I have not been able to find a solution for my problem. Maybe the difference is that I am using AngularJS

(HTML)

<li class="article-list_item" ng-repeat="noticia in news" >
    <article class="article_news" id="newsBlock{{noticia.id}}" >    
        <header>
          <h1 class="article_newsTitle"> 
              <a href="http://www.google.es" rel="tooltip" title="{{noticia.title}}"
                   data-toggle="modal" ng-bind-html-unsafe="noticia.shortTitle"></a>
          </h1>
        </header>   
    </article>

(JS)

$(document).ready(function () {
     $(".article_news").click(function (event) {
         $(this).addClass("approved"); 
     });
});

What I am trying to do is to add the class "Approved" to the object I am clicking.

But when I click the link inside the <article> , I dont want to add the Class. Instead, I want the browser to open the URL.

How can I do this? Must I use stopPropagation(), preventDefault() or similar? How should I use them?

Thanks in advance

Answer 1

Well, Angular automatic filter link action if you implement it in angular way. For implementing it in angular way you should create directive to bind click event which handles your issue. Still you can solve it like this.

ng-click="$event.stopPropagation()"

Your HTML

     <article class="article_news" id="newsBlock{{noticia.id}}" >    
        <header>
          <h1 class="article_newsTitle"> 
              <a ng-click="$event.stopPropagation()" href="http://www.google.es" rel="tooltip" title="{{noticia.title}}"
                   data-toggle="modal" ng-bind-html-unsafe="noticia.shortTitle"></a>
          </h1>
        </header>   
    </article>