CODEWITHSUNDEEP
angularjstwitter-bootstrap
Abhishek
Abhishek

Reputation: 3068

angular performing 2 click functions in a single click

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?

Upvotes: 0

Views: 34

Answers (1)

dave
dave

Reputation: 64657

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 
 }

Upvotes: 2

Related Questions