BUG - Collection Repeat function call on directive attribute


#1

Hello Guys

Today I’ve started to move some of my ng-repeat elements that were too big to keep in DOM to using collection-repeat instead. In the codepen below is a simple replication of an issue that I encountered during the migration.

codepen example

The problem is that the item variable provided by collection repeat is not available to function calls that are evaluated for attributes of custom directives (such as ‘echo’ and ‘echo-value’ in the example). Doing the same is possible using ng-repeat, so this makes me think collection-repeat is passing a incomplete scope to nested elements, compared to ng-repeat.

You can notice the problem if you open your console, it will say it cannot invoke ‘split’ on undefined.

The solution that could work is to pre-compute the function call when the collection is initialized and attach it as a field member to each item. However, if you know that the data is retrieved from a server via cachedResource, the property can be outdated as soon as the object resolves from the server instead of the cache, or in some cases even removed!

Any help or workable workarounds are much appreciated!


#2

I’ve managed to get the value to print inspired by following stackoverflow topic:

Angular.js: Using a directive inside an ng-repeat, and a mysterious power of scope ‘@’

Now the value is properly displayed, however there is still a problem with a call to interpolate, which is logged in the console on the codepen below:
Codepen - half working

Error: [$interpolate:interr] Can’t interpolate: {{compute(item)}}
TypeError: Cannot read property ‘split’ of undefined

I’ve tried other aproaches as suggested by the stackoverflow thread but each had some other bug popping up, the above codepen is the closest I’ve come to a solution. My guess is that the collection-repeat directive messes up the scope, but I am yet to compare the collection-repeat and ng-repeat directives.

Kind regards
Ben