Once again I stumbled on slow performance of ng-repeat and can't figure how to build a directive that will render an array of elements without utilizing ng-repeat anywhere (even in the template)
So, how do you guys do that?
Even if I iterate through the array, using template for every single element:
.directive('foo', function($parse, $compile) {
return {
restrict: 'E',
scope: { items: '=myarray' },
link: function (scope, element, attrs){
var tmplt = '<div> {{name}} </div>';
scope.items.forEach(function(){
element.append(tmplt(scope));
// now I'd like to have a scope of that element,
// and pass it into the template, and use properties related
// only to that element
// but I don't know how to get a scope for a child element
});
scope.$watch(attrs.myarray, function(value) { console.log('something change'); })
}
}});
If I choose to have a single template for all the elements, then again I have no choice but to use ng-repeat in it and it will create ngRepeatWatchers and everything gets slow down again.
Though I agree with @Mark, but here is dirty solution for your question:
http://plnkr.co/edit/wxM8mSoNsRGXBJUao5Xb?p=preview
The idea is to create isolated child scopes:
scope.items.forEach(function(item){
var childScope = scope.$new(true);
angular.extend(childScope, item);
element.append($compile(tmplt)(childScope));
});
And do not forget to delete those child scopes unpon each refresh.
and sill this solution needed to be benchmarked to see is it faster and how much comparing to ngRepeat.