angular performing 2 click functions in a single click

Question

I have the following code in my template of a django app:

      <div class="list-group">
        <a ng-repeat="prog in programs | orderBy:'academic_program.program_title' | orderBy:'primary_program':true" href="/acadprog/{{prog.academic_program.acad_program_code}}/" ng-click="display.addprogram = false" class="list-group-item">
            {{prog.academic_program.program_title}}
                <span  
                    ng-if="prog.primary_program == true" 
                    class="glyphicon glyphicon-flag pull-right" 
                    ng-click="open2()">
                </span>
            <div style="padding-bottom:5px;">
                <span class="badge badge-success">{{prog.credits_completed}}</span>
                <span class="badge badge-info">{{prog.academic_program.required_credits}}</span>
            </div>
        </a>    
      </div>

Here the open2() function opens up a modal dialog when clicked on the flag. The modal works fine and opens whenever i removed the contents in the href in my <a> tags. But when i put in a url in those hrefs, they do not open anymore. What might be happening? How do i get around it?

I found out that the problem is because the click on the flag also performs a click function on the list due to which it is reloading the whole view! How do i prevent the click function to happen on the href list?

dave · Accepted Answer · 2014-06-17 16:50:41Z

2

You will need to pass the event to the open2 function and preventDefault() on it.

<span  ng-if="prog.primary_program == true" 
       class="glyphicon glyphicon-flag pull-right" 
       ng-click="open2($event)">

 $scope.open2 = function(e) { 
   e.preventDefault(); 
   //do other stuff 
 }

answered Jun 17, 2014 at 16:50

dave

65.1k6 gold badges81 silver badges98 bronze badges

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

Collectives™ on Stack Overflow

angular performing 2 click functions in a single click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related