Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing a directive inside an ng-repeat, and a mysterious power of scope '@'
    primarykey
    data
    text
    <p>If you prefer to see the question in working code, start here: <a href="http://jsbin.com/ayigub/2/edit" rel="nofollow noreferrer">http://jsbin.com/ayigub/2/edit</a></p> <p>Consider this almost equivalent ways to write a simple direcive:</p> <pre><code>app.directive("drinkShortcut", function() { return { scope: { flavor: '@'}, template: '&lt;div&gt;{{flavor}}&lt;/div&gt;' }; }); app.directive("drinkLonghand", function() { return { scope: {}, template: '&lt;div&gt;{{flavor}}&lt;/div&gt;', link: function(scope, element, attrs) { scope.flavor = attrs.flavor; } }; }); </code></pre> <p>When used by themselves, the two directives work and behave identically:</p> <pre><code> &lt;!-- This works --&gt; &lt;div drink-shortcut flavor="blueberry"&gt;&lt;/div&gt; &lt;hr/&gt; &lt;!-- This works --&gt; &lt;div drink-longhand flavor="strawberry"&gt;&lt;/div&gt; &lt;hr/&gt; </code></pre> <p>However, when used within an ng-repeat, only the shortcut version works:</p> <pre><code> &lt;!-- Using the shortcut inside a repeat also works --&gt; &lt;div ng-repeat="flav in ['cherry', 'grape']"&gt; &lt;div drink-shortcut flavor="{{flav}}"&gt;&lt;/div&gt; &lt;/div&gt; &lt;hr/&gt; &lt;!-- HOWEVER: using the longhand inside a repeat DOESN'T WORK --&gt; &lt;div ng-repeat="flav in ['cherry', 'grape']"&gt; &lt;div drink-longhand flavor="{{flav}}"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>My questions are:</p> <ol> <li>Why does the longhand version not work inside an ng-repeat?</li> <li>How could you make the longhand version work inside an ng-repeat?</li> </ol>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    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