Issue
I am trying to use mdVirtualRepeatContainer
instead of ngRepeat
. So far it has provided huge performance improvements when showing long lists of items. However I can only make it work if I set the element size explicitly in the CSS.
In order to make the container ideally sized for different screens I am trying to set the size of the <md-virtual-repeat-container>
element using a directive.
The link function of my directive looks like this:
function link(scope, elem, attr, mdVirtualRepeatContainer) {
elem.css('height', '600px');
mdVirtualRepeatContainer.updateSize();
}
I'm just using the 600px as an example, ideally I'd determine an appropriate height.
This works for setting the height of the element but the result is just an empty div, the virtual repeat does not lay out any elements.
In fact, just attaching another directive to the <md-virtual-repeat-container>
element will cause it to not lay out any elements.
So how can I set the height of the virtual repeat container at 'runtime' and get it to actually render elements?
Solution
I got this working about 2 minutes after I posted this question.
Here is my directive:
(function (){
'use strict';
angular.module('reportModule').directive('runtimeHeight', runtimeHeight);
function runtimeHeight() {
var directive = {
link: link,
require: 'mdVirtualRepeatContainer'
};
return directive;
function link(scope, elem, attr, mdVirtualRepeatContainer) {
elem.css('height', '600px');
mdVirtualRepeatContainer.updateSize();
}
}
})();
The problem I had before that caused the directive to malfunction was due to the fact that I had a controller specified for the directive. At some point when I was grasping at straws I added a controller to see if it could be done that way and inadvertently prevented the correct method from working when I found it.
Answered By - TylerJames
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.