AngularJS : ng-repeat vs $interpolate -

AngularJS : ng-repeat vs $interpolate -

from have seen angular 2.0, have feeling going using angular 1.x while. has building blocks think need, downside have performance issue dirty checking trying think more. ng-repeat can issue because of number of watchers adds.

so have part of template (in jade):

li(ng-repeat='topmenuitem in sidemenu.topmenu', ng-class='{"is-active": topmenuitem.display === sidemenu.activetopmenu}') a(href='{{ topmenuitem.href }}') {{ topmenuitem.display }} ul(ng-if='sidemenu.secondmenu.length > 0 && topmenuitem.display === sidemenu.activetopmenu') li(ng-repeat='secondmenuitem in sidemenu.secondmenu', ng-class='{"is-active": secondmenuitem.display === sidemenu.activesecondmenu}') a(href='{{ secondmenuitem.href }}') {{ secondmenuitem.display }}

when displays 22 menu items number of watchers 90 (using this bookmark snippet).

i decided play around trying utilize $interpolate generate menu. ended directive compile function:

compile: function(element, attributes) { var toplevelexpression = $interpolate('<li{{ cssclass }}><a href="{{ topmenuitem.href }}">{{ topmenuitem.display }}</a>{{ secondlevelmenuhtml }}</li>'); var secondlevelexpression = $interpolate('<li{{ cssclass }}><a href="{{ secondmenuitem.href }}">{{ secondmenuitem.display }}</a></li>'); var updatemenu = function() { var html = ''; sidemenu.topmenu.foreach(function(topmenuitem) { var cssclass = topmenuitem.display === sidemenu.activetopmenu ? ' class="is-active"': ''; var secondlevelmenuhtml = ''; if(sidemenu.secondmenu.length > 0 && topmenuitem.display === sidemenu.activetopmenu) { secondlevelmenuhtml += '<ul>'; sidemenu.secondmenu.foreach(function(secondmenuitem) { var cssclass = secondmenuitem.display === sidemenu.activesecondmenu ? ' class="is-active"': ''; secondlevelmenuhtml += secondlevelexpression({ secondmenuitem: secondmenuitem, cssclass: cssclass, }); }); secondlevelmenuhtml += '</ul>'; } html += toplevelexpression({ topmenuitem: topmenuitem, cssclass: cssclass, secondlevelmenuhtml: secondlevelmenuhtml }); }); element.find('.application-navigation').html(html); }; homecoming function($scope) { $scope.$watchcollection('sidemenu', function() { updatemenu(); }); } }

from testing, code functions same ng-repeat, output should. version has 16 watchers , number not increment when more elements shown ng-repeat does.

since code doing bare minimum needed piece of code work, imagine javascript efficient (if not more efficient) code executes ng-repeat.

is assumption correct?

are there issues doing looping dom generation in way vs using ng-repeat?

tricky question.

i thought if one-time-bind property of object, if object changed, properties re-bound.

<div>{{::menu.menuitem}}</div> <button ng-click="changemenu()">switch</div>

that not case.

what 1 though - albeit bit of flaky/hacky approach (perhaps improve approach suggested in comments) - forcefulness angular re-bind. 1 such candidate ng-if:

<div ng-if="bound"> <div>{{::menu.menuitem1}}</div> <div>{{::menu.menuitem2}}</div> </div> <button ng-click="changemenu()">switch</div>

then, in controller:

$scope.bound = true; $scope.menu = {..}; // menu 1 $scope.changemenu = function(){ $scope.menu = {..}; // menu 2 $scope.bound = false; $timeout(function(){$scope.bound = true;}, 0); }

plunker

angularjs angularjs-directive angularjs-ng-repeat angularjs-interpolate