title: AngularJS: store all previous ng-focus events
body: <p>I have a panel with ng-focus objects:</p>
  
  <pre><code>            &lt;div style="font: 30pt bold; color: #000; text-align: center; "&gt;Add Elements:&lt;/div&gt;
              &lt;div id="arrow" class="Icon" style="margin-top: 10%; height: 140px;" tabindex="0" merch-draggable="draggable" ng-focus="focusHandler($event)"&gt;
                  &lt;img id="arrow" width="150" height="30" src="{!URLFOR($Resource.Icon, 'img/arrow.png')}"&gt;&lt;/img&gt;
              &lt;/div&gt;
              &lt;div id="box" ng-focus="focusHandler($event)" class="Icon" tabindex="0" style="height: 140px;" merch-draggable="draggable"&gt;
                  &lt;img id="box" width="120" height="80" src="{!URLFOR($Resource.Icon, 'img/box.png')}"&gt;&lt;/img&gt;
              &lt;/div&gt;
              &lt;div id="line" ng-focus="focusHandler($event)" class="Icon" tabindex="0" style="height: 140px;" merch-draggable="draggable"&gt;
                  &lt;img id="line" width="150" height="50" src="{!URLFOR($Resource.Icon, 'img/line.png')}"&gt;&lt;/img&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>...and focus handler function in my app controller:</p>
  
  <pre><code>$scope.focusHandler = function focusHandler(ev) {
      console.log('&gt; handler element id: ' + ev.srcElement.id);
      ev = (ev) ? ev : ((window.event) ? window.event : null);
      if(ev) {
          var getID = (ev.target) ? ev.target : event.srcElement;
          console.log('&gt; getID: ' + getID.id);
          FocusService.focusCanvas(getID.id);
      }
  }
  </code></pre>
  
  <p>in this handler i get type of object which i want to draw in canvas (arrow, line etc) and send in service FocusService, function focusCanvas (with handlers mouse events):</p>
  
  <pre><code>        (function() {
              'use strict';
  
              angular
                  .module('MyApp')
                  .service('FocusService', FocusService);
  
              function FocusService() {
                  var service = {
                      focusCanvas: focusCanvas
                  };
  
                  return service;
  
                  function focusCanvas(objType) {
  
                          var circle, isDown, origXX, origYY, line, box, arrow, text, question;
                          activeCanvas.deactivateAll().renderAll();
                          activeCanvas.selection = false;
  
                          activeCanvas.on('mouse:down', function(o){...}
                          activeCanvas.on('mouse:move', function(o){...}
  ......
  </code></pre>
  
  <p>and if i, for example, at first click arrow in panel, then line, and after that draw in canvas: are drawn these two elements together.</p>
  
  <pre><code> &gt; handler element id: arrow //log from handler on arrow click
   &gt; getID: arrow
  
   &gt; handler element id: box  //log from handler on arrow click
   &gt; getID: box
  </code></pre>
  
  <p>then one click on canvas, and get log from focusCanvas activeCanvas.on('mouse:down') {console.log(objType);...}</p>
  
  <pre><code>arrow
  box
  </code></pre>
  
  <p>event mouse down execute twice for arrow and box, but actual object only box.
  what is it? where i made a mistake? sorry for my Engl and thanks for your answers ) <a href="http://i.stack.imgur.com/DgC0N.png" rel="nofollow">Drawn two obj together example</a></p>