ng-include inside sf-virtual-repeat

[huynhhuutai]

Hi stackfull, I'm trying to combine sf-virtual-repeat with ng-include, but I got error in 2 following cases:

<div>
  <div>
    <div sf-virtual-repeat="item in items"  ng-include src="itemTemplateUrl">
    </div>
  </div>
</div>

Error: [$compile:multidir] Multiple directives [sfVirtualRepeat, ngInclude] asking for transclusion

<div>
  <div>
    <div sf-virtual-repeat="item in items">
        <div ng-include src="itemTemplateUrl"></div>
    </div>
  </div>
</div>

Error: Unable to compute height of row

Could you help me out, or any suggestion, thanks..

[stackfull]

I think the first case couldn't work because, as the error says, angular won't allow it.

The second case is a limitation of the way virtual repeaters work. It should be fixable by adding an explicit CSS height to that inner div. Pop a class on it and set "height: 20px" or whatever.

[huynhhuutai]

I have tried the first case with ng-repeat, it work! Actually, I don't want the height of element be fixed, it should be depend on content of template. I'm so sorry about that limitation. Anyway thanks for your comments.

[stackfull]

It is an annoying limitation, to be sure. But it's also fundamental to how virtual scrolling works as a concept. No matter how it's implemented, you need to be able to calculate how high the full set of elements is. You could, in theory, wait until an element was rendered and then read the height of that, but angular doesn't stabilise that way and there's no event you can hook into. The only workaround I've seen is to use a timer to read the height and re-adjust. That's just a hack too far for me.

I'll look again at the first case, maybe something changed in angular that made this work (need to scan through this: angular/angular.js#3584)

[huynhhuutai]

Okay, I got it. The other problem about the height of element: http://demo.stackfull.com/virtual-scroll/#/expose Why are there so many rows which have been rendered (Active Rows) in unnecessary way than rows seen (Visible Rows) (up 315/15). I think it should be reduced (may be 100/15). Simultaneously,the number of rows which have been rendered is also inversely proportional with their height. Example: the height of a element is 20px -> 100 element which is rendered., but the other side, the height of a element is 100px -> only about 20 element which is rendered.

[huynhhuutai]

In the first case: "This is not an ideal solution to the problem of multiple transclusions per element" (https://github.com/angular/angular.js/commit/63c5334c84b7269428c710226764d1f08a36e0d4)

[huynhhuutai]

Hi Paul, You have any solution for these issues? I hope that can help me out. Thanks.

[stackfull]

I'm afraid not - the code you referenced above is explicitly checking for ngRepeat. Short of getting angular to check for sfVirtualRepeat too, I'm not sure I can do anything about it.

Leaving the ticket open to remind myself to have another look though.

[stackfull]

Closing - pretty sure I can't fight other directives over transcludes without really nasty things happening