Note that there are some explanatory texts on larger screens.

plurals
  1. POAngularJS - Access isolated scope in directive's link function
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload