title: Tricky scope binding in angularjs directives
body: <p>I want to write 'edit in place' directive in angularjs. 
  I want that directive is reusable, therefore I have following requirements on the directive:</p>
  
  <ol>
  <li>it must be an attirbute that can deocorate any element, that makes sense (div,span,li)</li>
  <li>it must support edit button, clicking on that will change set ot displayd elements into input fileds. Typically properties of one object, e.g. contact (number, name) </li>
  </ol>
  
  <p>I disocvere trickery behaviour of scope visibility in the directive that can be seen in this fiddle <a href="http://jsfiddle.net/honzajde/ZgNbU/1/" rel="nofollow">http://jsfiddle.net/honzajde/ZgNbU/1/</a>. </p>
  
  <ol>
  <li>Comenting out in the directive: template and scope -> contact.number and contact.name are displayed</li>
  <li>Comenting out in the directive: scope -> contact.number only is displayed</li>
  <li>Not commenting out anything -> nothing is displayed</li>
  </ol>
  
  <p>=> when both are commented out just adding template to the directive makes it render contact.number even though template is not used.</p>
  
  <p>I am asking what are the rules of the game? </p>
  
  <pre><code>&lt;div&gt;
    &lt;div ng-controller="ContactsCtrl"&gt;
      &lt;h2&gt;Contacts&lt;/h2&gt;
      &lt;br /&gt;
      &lt;ul&gt;
          &lt;li ng-repeat="contact in contacts"&gt;
              &lt;span edit-in-place="" ng-bind="contact.number"&gt;&lt;/span&gt; | 
              &lt;span edit-in-place="" &gt;{{contact.name}}&lt;/span&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;br /&gt;
      &lt;p&gt;Here we repeat the contacts to ensure bindings work:&lt;/p&gt;
      &lt;br /&gt;
      &lt;ul&gt;
          &lt;li ng-repeat="contact in contacts"&gt;
              {{contact.number}} | {{contact.name}}
          &lt;/li&gt;
      &lt;/ul&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  var app = angular.module( 'myApp', [] );
  
  app.directive( 'editInPlace', function() {
    return {
      restrict: 'A',
      //scope: { contact:"=" },    
      template: '&lt;span ng-click="edit()" ng-bind="value"&gt;&lt;/span&gt;&lt;input ng-model="value"&gt;&lt;/input&gt;',
      link: function ( $scope, element, attrs ) {
        // Let's get a reference to the input element, as we'll want to reference it.
        var inputElement = angular.element( element.children()[1] );
  
        // This directive should have a set class so we can style it.
        element.addClass( 'edit-in-place' );
  
        // Initially, we're not editing.
        $scope.editing = false;
  
        // ng-click handler to activate edit-in-place
        $scope.edit = function () {
          $scope.editing = true;
  
          // We control display through a class on the directive itself. See the CSS.
          element.addClass( 'active' );
  
          // And we must focus the element. 
          // `angular.element()` provides a chainable array, like jQuery so to access a native DOM function, 
          // we have to reference the first element in the array.
          inputElement[0].focus();
        };
  
        // When we leave the input, we're done editing.
        inputElement.prop( 'onblur', function() {
          $scope.editing = false;
          element.removeClass( 'active' );
        });
      }
    };
  });
  
  app.controller('ContactsCtrl', function ( $scope ) {
    $scope.contacts = [
      { number: '+25480989333', name: 'sharon'},
      { number: '+42079872232', name: 'steve'}
    ];
  });
  </code></pre>