title: AngularJS - Access isolated scope in directive's link function
body: <p>I'm giving a first try at AngularJS custom directives.</p>
  
  <p>I'm having trouble using (or understanding ...) the isolated scope in the link function of the directive.</p>
  
  <p>Here is the code of this part of my app : </p>
  
  <p>view.html</p>
  
  <pre><code>...
  &lt;raw-data id="request-data" title="XML of the request" data="request"&gt;See the request&lt;/raw-data&gt;
  ...
  </code></pre>
  
  <p><code>request</code> is a variable published in the scope of the viewCtrl that contains the xml-string of a request.</p>
  
  <p>rawData.js</p>
  
  <pre><code>directives.directive('rawData', function() {
  
      return {
          restrict : 'E',
          templateUrl : 'partials/directives/raw-data.html',
          replace : true,
          transclude : true,
          scope : {
              id : '@',
              title : '@',
              data : '='
          },
          link : function($scope, $elem, $attr) {
              console.log($scope.data); //the data is correclty printed
              console.log($scope.id); //undefined
          }
      };
  });
  </code></pre>
  
  <p>raw-data.html</p>
  
  <pre><code>&lt;div&gt;
      &lt;!-- Button to trigger modal --&gt;
      &lt;a href="#{{id}}Modal" role="button" class="btn" data-toggle="modal" ng-transclude&gt;&lt;/a&gt;
  
      &lt;!-- Modal --&gt;
      &lt;div id="{{id}}Modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="{{id}}Modal" aria-hidden="true"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
              &lt;h3 id="myModalLabel"&gt;{{ title }}&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;textarea class="input-block-level" rows="10"&gt;{{ data }}&lt;/textarea&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;!-- &lt;button class="btn" ng-click="toggleTagText('')"&gt;{{'cacher'}} l'image&lt;/button&gt; --&gt;
              &lt;button class="btn btn-primary" data-dismiss="modal" aria-hidden="true"&gt;Fermer&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I don't understand why the ID is correclty shown when the modal pops, but when I try to <code>console.log()</code> it, its value is undefined.</p>
  
  <p>Maybe i'm wrong with the isolated scope value (<code>=</code> and <code>@</code>).</p>
  
  <p>Thank you for reading. :)</p>