title: How can I make an AngularJS directive to stopPropagation?
body: <p>I am trying to "stopPropagation" to prevent a Twitter Bootstrap navbar dropdown from closing when an element (link) inside an li is clicked.  Using this method seems to be the common <a href="https://stackoverflow.com/questions/12323066/twitter-bootstrap-stop-propagation-on-dropdown-open">solution</a>.</p>
  
  <p>In Angular, seems like a directive is the place to do this?  So I have:</p>
  
  <pre><code>// do not close dropdown on click
  directives.directive('stopPropagation', function () {
      return {
          link:function (elm) {            
              $(elm).click(function (event) {                
                  event.stopPropagation();
              });
          }
      };
  });
  </code></pre>
  
  <p>... but the method does not belong to element:</p>
  
  <pre><code>TypeError: Object [object Object] has no method 'stopPropagation'
  </code></pre>
  
  <p>I tie in the directive with</p>
  
  <pre><code>&lt;li ng-repeat="foo in bar"&gt;
    &lt;div&gt;
      {{foo.text}}&lt;a stop-propagation ng-click="doThing($index)"&gt;clickme&lt;/a&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Any suggestions?</p>