javascript - "Static" attributes in AngularJS -


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