Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit a5b8943

Browse files
crisbetojelbourn
authored andcommitted
perf(navbar): reduces amount of watchers and buttons per item (#9818)
With the current approach, the navbar creates 3 child buttons and uses 3 `ng-if` statements to determine which one to render. This seems wasteful. This PR moves that logic to the compilation phase which will only be triggered once (per occurrence in the DOM) and won't add any more watches.
1 parent db90283 commit a5b8943

File tree

1 file changed

+41
-32
lines changed

1 file changed

+41
-32
lines changed

src/components/navBar/navBar.js

Lines changed: 41 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -390,27 +390,44 @@ function MdNavItem($$rAF) {
390390
controllerAs: 'ctrl',
391391
replace: true,
392392
transclude: true,
393-
template:
394-
'<li class="md-nav-item" role="option" aria-selected="{{ctrl.isSelected()}}">' +
395-
'<md-button ng-if="ctrl.mdNavSref" class="_md-nav-button md-accent"' +
396-
'ng-class="ctrl.getNgClassMap()"' +
397-
'tabindex="-1"' +
398-
'ui-sref="{{ctrl.mdNavSref}}">' +
399-
'<span ng-transclude class="_md-nav-button-text"></span>' +
400-
'</md-button>' +
401-
'<md-button ng-if="ctrl.mdNavHref" class="_md-nav-button md-accent"' +
402-
'ng-class="ctrl.getNgClassMap()"' +
403-
'tabindex="-1"' +
404-
'ng-href="{{ctrl.mdNavHref}}">' +
405-
'<span ng-transclude class="_md-nav-button-text"></span>' +
406-
'</md-button>' +
407-
'<md-button ng-if="ctrl.mdNavClick" class="_md-nav-button md-accent"' +
408-
'ng-class="ctrl.getNgClassMap()"' +
409-
'tabindex="-1"' +
410-
'ng-click="ctrl.mdNavClick()">' +
411-
'<span ng-transclude class="_md-nav-button-text"></span>' +
412-
'</md-button>' +
413-
'</li>',
393+
template: function(tElement, tAttrs) {
394+
var hasNavClick = tAttrs.mdNavClick;
395+
var hasNavHref = tAttrs.mdNavHref;
396+
var hasNavSref = tAttrs.mdNavSref;
397+
var navigationAttribute;
398+
var buttonTemplate;
399+
400+
// Cannot specify more than one nav attribute
401+
if ((hasNavClick ? 1:0) + (hasNavHref ? 1:0) + (hasNavSref ? 1:0) > 1) {
402+
throw Error(
403+
'Must not specify more than one of the md-nav-click, md-nav-href, ' +
404+
'or md-nav-sref attributes per nav-item directive.'
405+
);
406+
}
407+
408+
if (hasNavClick) {
409+
navigationAttribute = 'ng-click="ctrl.mdNavClick()"';
410+
} else if (hasNavHref) {
411+
navigationAttribute = 'ng-href="{{ctrl.mdNavHref}}"';
412+
} else if (hasNavSref) {
413+
navigationAttribute = 'ui-sref="{{ctrl.mdNavSref}}"';
414+
}
415+
416+
if (navigationAttribute) {
417+
buttonTemplate = '' +
418+
'<md-button class="_md-nav-button md-accent" ' +
419+
'ng-class="ctrl.getNgClassMap()" ' +
420+
'tabindex="-1" ' +
421+
navigationAttribute + '>' +
422+
'<span ng-transclude class="_md-nav-button-text"></span>' +
423+
'</md-button>';
424+
}
425+
426+
return '' +
427+
'<li class="md-nav-item" role="option" aria-selected="{{ctrl.isSelected()}}">' +
428+
(buttonTemplate || '') +
429+
'</li>';
430+
},
414431
scope: {
415432
'mdNavClick': '&?',
416433
'mdNavHref': '@?',
@@ -453,10 +470,13 @@ function MdNavItemController($element) {
453470
this._$element = $element;
454471

455472
// Data-bound variables
473+
456474
/** @const {?Function} */
457475
this.mdNavClick;
476+
458477
/** @const {?string} */
459478
this.mdNavHref;
479+
460480
/** @const {?string} */
461481
this.name;
462482

@@ -466,17 +486,6 @@ function MdNavItemController($element) {
466486

467487
/** @private {boolean} */
468488
this._focused = false;
469-
470-
var hasNavClick = !!($element.attr('md-nav-click'));
471-
var hasNavHref = !!($element.attr('md-nav-href'));
472-
var hasNavSref = !!($element.attr('md-nav-sref'));
473-
474-
// Cannot specify more than one nav attribute
475-
if ((hasNavClick ? 1:0) + (hasNavHref ? 1:0) + (hasNavSref ? 1:0) > 1) {
476-
throw Error(
477-
'Must specify exactly one of md-nav-click, md-nav-href, ' +
478-
'md-nav-sref for nav-item directive');
479-
}
480489
}
481490

482491
/**

0 commit comments

Comments
 (0)