StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PODirective isolate scope with ng-repeat scope in AngularJS
text
Body
copied!<p>I have a directive with an isolate-scope (so that I can reuse the directive in other places), and when I use this directive with an <code>ng-repeat</code>, it fails to work.</p> <p>I have read all the documentation and Stack Overflow answers on this topic and understand the issues. I believe I have avoided all the usual gotchas.</p> <p>So I understand that my code fails because of the scope created by the <code>ng-repeat</code> directive. My own directive creates an isolate-scope and does a two-way data-binding to an object in the parent scope. My directive will assign a new object-value to this bound variable and this works perfectly when my directive is used without <code>ng-repeat</code> (the parent variable is updated correctly). However, with <code>ng-repeat</code>, the assignment creates a new variable in the <code>ng-repeat</code> scope and the parent variable does not see the change. All this is as expected based on what I have read.</p> <p>I have also read that when there are multiple directives on a given element, only one scope is created. And that a <code>priority</code> can be set in each directive to define the order in which the directives are applied; the directives are sorted by priority and then their compile functions are called (search for the word priority at <a href="http://docs.angularjs.org/guide/directive">http://docs.angularjs.org/guide/directive</a>).</p> <p>So I was hoping I could use priority to make sure that my directive runs first and ends up creating an isolate-scope, and when <code>ng-repeat</code> runs, it re-uses the isolate-scope instead of creating a scope that prototypically inherits from the parent scope. The <code>ng-repeat</code> documentation states that that directive runs at priority level <code>1000</code>. It is not clear whether <code>1</code> is a higher priority level or a lower priority level. When I used priority level <code>1</code> in my directive, it did not make a difference, so I tried <code>2000</code>. But that makes things worse: my two-way bindings become <code>undefined</code> and my directive does not display anything.</p> <p>I have created <a href="http://jsfiddle.net/BWybB/7/">a fiddle to show my issue</a>. I have commented out the <code>priority</code> setting in my directive. I have a list of name objects and a directive called <code>name-row</code> that shows the first and last name fields in the name object. When a displayed name is clicked, I want it to set a <code>selected</code> variable in the main scope. The array of names, the <code>selected</code> variable are passed to the <code>name-row</code> directive using two-way data-binding.</p> <p>I know how to get this to work by calling functions in the main scope. I also know that if <code>selected</code> is inside another object, and I bind to the outer object, things would work. But I am not interested in those solutions at the moment.</p> <p>Instead, the questions I have are:</p> <ul> <li>How do I prevent <code>ng-repeat</code> from creating a scope that prototypically inherits from the parent scope, and instead have it use my directive's isolate-scope?</li> <li>Why is priority level <code>2000</code> in my directive not working?</li> <li>Using Batarang, is it possible to know what type of scope is in use?</li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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