Databases
StackOverflow2013
Postsdbo
PODirective isolate scope with ng-repeat scope in AngularJS
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODirective isolate scope with ng-repeat scope in AngularJS
    primarykey
    data
    text
    <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&nbsp;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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USPeter Mortensen
    1. USDeepak Nulu
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PODirective isolate scope with ng-repeat scope in AngularJS
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PODirective isolate scope with ng-repeat scope in AngularJS
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PODirective isolate scope with ng-repeat scope in AngularJS
      1. This table or related slice is empty.
      1. VTUpMod
    1. CONormally, you don't want to use an isolate scope if your directive will be used on the same element with other directives. Since you are creating your own scope properties, and you need to work with ng-repeat, I suggest using `scope: true` for your directive. See also (if you haven't already) http://stackoverflow.com/questions/14914213/when-writing-a-directive-how-do-i-decide-if-a-need-no-new-scope-a-new-child-sc Also, just because a directive will be used in multiple places does not mean we should automatically use an isolate scope.
      singulars
      1. PODirective isolate scope with ng-repeat scope in AngularJS
      1. USMark Rajcok
    2. COI have read many of your answers (they are beyond excellent, thanks for writing them), but it never occurred to me to read your questions :-). I read what you linked to. It appears to me that isolate-scope directives cannot be mixed with other directives. I agree with the sentiment that such directives are components and therefore they do not need to be mixed with other directives. The one exception (so far) for me would be `ng-repeat`. I think it is valuable to be able to mix standalone directives with `ng-repeat`. To be continued...
      singulars
      1. PODirective isolate scope with ng-repeat scope in AngularJS
      1. USDeepak Nulu
    3. COContinued from above... So if there should be only one directive with a scope for an element, then `ng-repeat` should not have a scope. `ng-repeat` having a scope does make sense for the typical use-case, so I am not suggesting it be changed. Instead, like I commented in Alex Osborn's answer, I think I will create a repeat directive based on `ng-repeat` that does not create its own scope. This can then be used for repeating directives which have their own isolate-scopes. To be continued...
      singulars
      1. PODirective isolate scope with ng-repeat scope in AngularJS
      1. USDeepak Nulu
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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