custom directive with isolated scope in ng-repeat problem

[Michał Kocztorz]

Hi everyone, 

I'm new to angular, so it's possible that what I'm trying to achieve is just wrong, but here's the problem:

- I got parent directive containing some model in it's scope (list of objects, indexed by ID)

- I got child directive that is supposed to do something with an element of that list. It has isolated scope and is supposed to bind one of the elements in parent's collection using "element' attribute into it's scope.

- Parent directive uses ng-repeat to create child directive for every element of it's collection. Additionally it adds "element" attribute so the child directive could bind it's scope to one of the elements in collection.

Problem is that when ng-repeat runs it seems to execute the child directive before it evaluates the "element" attribute. This makes the child directive to fail when binding the scope.

It seems that ng-repeat should evaluate the "element" attribute first and then execute the child directive.

I made a simplified example on jsfiddle: http://jsfiddle.net/0k4w7zd0/5/

Thanks for any help in advance!

Michał

[Mateusz Skoczylas]

Hi Michał,

I did small changes to Your fiddle and it seems to work now:

ng-repeat is now changed and placed in outer div. Check this out:

http://jsfiddle.net/0noruwjo/

Mateusz

[Michał Kocztorz]

Hi Mateusz, 

Thank you for your reply. The solution you made has the disadvantage of additional element in ng-repeat. 

I was about to post a solution I got from a coleague of mine:

http://jsfiddle.net/0k4w7zd0/7/

notice that the only change is:

element="collection[key]"

instead of

element="collection.{{key}}"

The truth is I got only the solution but no explanation why this works :). Anybody knows?

Is this a good approach or does it have any disadvantages?

Michał

[Sander Elias]

Hi Michal,

I didn’t look at your code at all, so I might be slightly off here ;)

your second sample is an expression inside an expression. While this is possible,
it will not work by itself.

the first one is just a simple JS variable, that angular can parse in 1 go. It’s more a JavaScript
thing then an angular one.

In JS those two are exactly the same: object.propertyName === object["propertyName"]
Notice how the second variant uses a sting to fetch the propertyName.
this means you can do

   var key = 'propertyName'
   var result = object[key]

This can be very handy from time to time.
If you have some more questions, just ask!

Regards

Sander

​

[Michał Kocztorz]

Thanks Sander,

I understand both object attributes access methods and this was not the issue here. The problem was that angular failed to evaluate {{key}} expression in ng-repeat before my custom directive was executed.

Michał 

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/Qn15OWje7m0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Best regards,

Michał Kocztorz

Skype ID: michal_kocztorz

Polcode SA

ul. Hoża 13, 00-528 Warszawa

http://www.polcode.com/

T: +48 22 825 50 47

Spółka zarejestrowana w Sądzie Rejonowym dla m.st. Warszawy XII, Wydział Gospodarczy KRS pod numerem 0000482235, NIP PL 701-021-72-88, o kapitale zakładowym 300.000 zł, wpłaconym w całości.

[Sander Elias]

Hi Michal,

I just looked at your sample. It's evaluated all-right, but you can't expect angular to evaluate your expression twice, and that's what would be needed for that!

Regards

Sander

[Michał Kocztorz]

Sander, you might be right on how that works internally as I said I'm a total newbe to angular. 

When I wrote that piece of code I assumend that ng-repeat will take care of the {{key}} changing it to an id (e.g. 'id1') and then my custom directive will take over and bind it's isolated scope to already evaluated element. 

When I tested I also made ng-repeat on simple div and that created expected result (got list of divs with resolved element attribute) and that pushed me deeper into error :).

I guess what is confusing for me is the fact that I came to believe that anything that angular will evaluate and place in template has to be in {{ ]}. In this case collection[key] the key seems odd. Apparently this impression is wrong.

Anyway, thanks again for all the help!

Michał

--

You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/Qn15OWje7m0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.