Material: mdNavItem: TypeError: Cannot read property 'getName' of undefined

Created on 31 Oct 2016  路  10Comments  路  Source: angular/material

Actual Behavior:

  • What is the issue? Undefined property 'getName' when using mdNavHref with ngRoute and mdNavItem directive. An error is thrown however the page location change is successfull. Same error is thrown even if you wait for the $routeChangeSuccess event before defining the mdSelectedNavItem value.
  • What is the expected behavior? No errors.

CodePen

Angular Versions:

  • Angular Version: 1.5.8
  • Angular Material Version: 1.1.1

Additional Information:

  • Browser Type: Chrome
  • Browser Version: 54.0.2840.71 m
  • OS: Windows 7
  • Stack Traces:
TypeError: Cannot read property 'getName' of undefined
    at angular-material.min.js:10
    at o._findTab (angular-material.min.js:10)
    at o._getTabByName (angular-material.min.js:10)
    at o._updateTabs (angular-material.min.js:10)
    at angular-material.min.js:10
    at angular.js:19612
    at completeOutstandingRequest (angular.js:5964)
    at angular.js:6243
fixed bug

Most helpful comment

I have updated my code. I replace md-nav-href by md-nav-click and click event will be call $window.location.href = "any href". And it works ok for me. But I don't know why and what is difference between md-nav-href and md-nav-click.
Here my codepen update follow @remarshy : http://codepen.io/mnguyencntt/pen/ENvGBM
The first navigation will throw error and The second will not.

All 10 comments

I have same problem

Same here!

I have the same issue...please help

@remarshy this is also happening to me, but it seems it only happens if i'm dynamically injecting this as a component or directive on different views. If you keep this in your index.html it will work, still this is an issue that needs to be resolved, since some of my views don't require the navbar.

I have updated my code. I replace md-nav-href by md-nav-click and click event will be call $window.location.href = "any href". And it works ok for me. But I don't know why and what is difference between md-nav-href and md-nav-click.
Here my codepen update follow @remarshy : http://codepen.io/mnguyencntt/pen/ENvGBM
The first navigation will throw error and The second will not.

@mnguyencntt using md-nav-click worked for me. I am changing state using md-nav-click

@mnguyencntt I saw that you used $locationProvider.html5Mode(false).hashPrefix('!'); im using $locationProvider.html5Mode(true); and what it does is that it will refresh the entire page again, let me know if you know a way around this, thanks!

@srobledo I have removed this line but error still happen. I want to mention htmlMode() default on this example, default is false. I don't why this error happens.
I don't know what is exactly difference between md-nav-href & md-nav-click, why md-nav-href do throw error message and md-nav-click do not throw?

having this as well^^ But is it fixed with https://github.com/angular/material/issues/9386 ?

Verified in CodePen that this was fixed in 1.1.2 and is still fixed in 1.1.6.

Was this page helpful?
0 / 5 - 0 ratings