Prevent calling parent when nested ui-sref

Question

Let say I have nested DOMs and each has ui-sref for different angular-ui-router state. I want to click outer to only alert outer and c

Answer 1

For a completely different purpose I had a stopEvent directive just waiting to be used for the nested ui-sref purpose.

  Outer
  Inner

This is the directive

app.directive('stopEvent', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attr) {
      element.bind('click', function (e) {
        e.stopPropagation();
      });
    }
  };
});