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

Jay Shukla · Accepted Answer · 2014-02-11 08:03:29Z

0

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>

edited Feb 11, 2014 at 8:03

answered Feb 11, 2014 at 7:52

Jay Shukla

5,8368 gold badges35 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

User 23 Over a year ago

Wow that works!! Thank you. I was mad I was not able to do it... thanks again for your help.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related