Angular.js stop-propagation directive

README.md

Stop event propagation in Angular.js

This directive allows you to stop propagation for any event supplied.

Lets say you have an ng-click handler on a button that is overlayed on top of an <a href></a> link. You cant your click handler to fire, but not the anchor tag's default action. What you need is to stop the propagation of the click event up to the anchor tag.

Usage

<div ng-click="handleContainingElementClick()">
  <button ng-click="handleChildClick()" stop-propagation="click"></button>
</div>

angular-stop-propagation.coffee

module.directive "stopPropagation", ->
  restrict: "A"
  link: ($scope, $element, $attrs) ->
    previousEventName = null
    eventHandler = (e) -> e.stopPropagation()
    
    $attrs.$observe "stopPropagation", (eventName) ->
      $element.off previousEventName, eventHandler if previousEventName
      $element.on eventName, eventHandler