i have directive generates large amount of html input[type="radio"] ng-repeat. each of them has number of attributes assigned.
basically:
<div ng-repeat"day in days"> <label ng-repeat="slot in day.slots"> <input type="radio" class="{{slot.class}}" value="{{slot.value}}" ng-disabled="{{slot.disabled}}"> </label> </div>
the problem angular adds watcher each attribute of each input element , consumes lot of resources. attributes won't change if days
doesn't change. there way can make attributes static , still use ng-repeat? or must generate template in other way? in case, how , still have re-render when days
change?
update: clarified wasn't class attribute
try using ng-class
.
<input type="radio" ng-class="slot.class" />
the watcher still bound, class attribute not set everytime digest happens, when value of slot.class
changes.
edit: updated reflect original poster wanted.
i'm not sure if practise, try write directive generate 'dumb' template deregistering watchers. way, if result of watch statement changes, updating template.
something this:
module.directive('shallowwatch', function($compile){ return { compile : function(telement, tattrs){ var templatefn = $compile(telement.html()); telement.empty(); return function(scope, element, attrs){ var childscope; scope.watch(attrs.shallowwatch, function(){ element.empty(); if(childscope){ childscope.$destroy(); } childscope = scope.$new(); element.append(templatefn(childscope)); traversescope(childscope, function(scope){ scope.$$watchers = []; }); }); }; } }; function traversescope(target, fn){ var current, next; current = target; { fn.apply(current, [current]); //depth-first traversal pulled angularjs core if (!(next = (current.$$childhead || (current !== target && current.$$nextsibling)))) { while(current !== target && !(next = current.$$nextsibling)) { current = current.$parent; } } } while ((current = next)); } });
you'd use so:
<div shallow-watch="days"> <div ng-repeat"day in days"> <label ng-repeat="slot in day.slots"> <input type="radio" class="{{slot.class}}" value="{{slot.value}}" ng-disabled="{{slot.disabled}}"> </label> </div> </div>
Comments
Post a Comment