title: Event propagation on angularjs
body: <p>I am implementing a web app using angularjs (first time for me). One of the feature I would like to provide the user with is to create a div in the main window when the user click on an image in the menu.</p>
  <p>For that, I have created a directive as shown below.</p>
  <pre><code>var platform = angular.module('platform', []);
      
  platform.directive('addElement', function() {
          
    return function (scope,element, attrs){
          var createElement;
          
          createElement = function(){
              $('&lt;div&gt;Test&lt;/div&gt;').appendTo('#body-main-window');
          };
  
          
          $(this).on('click',createElement);
      } 
  });
  </code></pre>
  <p>And here is the following html code:</p>
  <pre><code>&lt;img class = &quot;imgMenu&quot; src=&quot;styles/img/logo_add.png&quot; add-element /&gt;
  </code></pre>
  <p>The problem is that the <code>onClick</code> event triggered on an element looks to be propagated to all its ancestors. Indeed, wherever I click on, the div is created. It is not the expected behaviour since the div should be created only when the user click on image where the directive is.</p>
  <p>Additionally, when clicking, the directive is executed as many times as there are images with the directive attribute.</p>
  <p>Here is a fiddle to illustrate my problem : <a href="http://jsfiddle.net/6Ku7D/10/" rel="nofollow noreferrer">http://jsfiddle.net/6Ku7D/10/</a></p>
  <p>One solution would be to use the ng-click directive but it will imply doing some DOM modifications within the controller (and it is not the proper way to achieve my goal). Directive is thus the solution but I am getting stuck.</p>
  <p><strong>EDIT (EXTRA INFORMATION)</strong></p>
  <p>Actually, it is just the skeleton of what I want to do. In a nutshell, elements I want to click on are in the menu of my app. These elements are simply names of some objects. By clicking on them, I want to create a div that will not contain only the name  but other information on this object that can be edited. Moreover, the div I will create should be draggable (using jquery-ui) and finally, I should be able to &quot;link&quot; these divs to create a workflow. Actually, what I want to do is something quite similar to <a href="http://pipes.yahoo.com/pipes/" rel="nofollow noreferrer">yahoo pipes</a> (providing a user-friendly interface for mashup/workflow edition) but dedicated to researchers in computer science (data mining). Objects will be algorithms, datasets or visualization techniques that have been first imported via a web service I have developped. Consequently, it is not as simple as &quot;adding a value to an existing array&quot;. Do you still think I should use ng-click?</p>