CODEWITHSUNDEEP
javascriptangularjs
blaster
blaster

Reputation: 8937

Angular - Suppressing Broadly Defined Events for Narrowly Defined Contained Elements

What if I want a broadly defined ng-click on a large panel, but I want any link tags to trigger the link behavior only and not the ng-click? Example:

<div ng-click="doIt()">
    <div>Lots of other stuff...</div>

    <!-- I don't want this or any other links to trigger the ng-click behavior -->
    <a href='http://www.amazon.com' target="_blank"></a>
</div>

Upvotes: 0

Views: 30

Answers (1)

Jonathan Palumbo
Jonathan Palumbo

Reputation: 6871

You can attach an ng-click to the links you don't want to be affected and use $event.stopPropagation();

In your controller.

$scope.dontDoIt = function($event){
    $event.stopPropagation();
};

Inside your view.

<div ng-click="doIt()">
    <div>Lots of other stuff...</div>

    <!-- I don't want this or any other links to trigger the ng-click behavior -->
    <a href='http://www.amazon.com' ng-click="dontDoIt($event)" target="_blank"></a>
</div>

Fiddle example.

Upvotes: 1

Related Questions