Cannot set property ‘show’ of undefined at new DeathrayMenuController – AngularJS

Hey everyone,

I’ve just started working my way through AngularJS by Brad Green & Shyam Seshadri. Unfortunately I ran into a bit of an issue on page 23 (line 19):

TypeError: Cannot set property 'show' of undefined
    at new DeathrayMenuController (http://127.0.0.1/:18:27)
    at d (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:28:174)
    at Object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:28:304)
    at $get (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:52:239)
    at $get.g (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:43:348)
    at m (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:6:494)
    at i (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:43:213)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:307)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:324)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:324) 

The solution to this problem turned out to be pretty straight forward, just set the menu state in a similar fashion to that used in the previous exercises:

  1. <html ng-app=''>
    
  2. 	<head>
    
  3. 		<title>Your Shopping Cart</title>
    
  4. 	</head>
    
  5. 	<body>
    
  6.  
  7. 		<div ng-controller="DeathrayMenuController">
    
  8. 			<button ng-click='toggleMenu()'>Toggle Menu</button>
    
  9. 			<ul ng-show='menuState.show'>
    
  10. 				<li ng-click='stun()'>Stun</li>
    
  11. 				<li ng-click='disintergrate()'>Disintergrate</li>
    
  12. 				<li ng-click='erase()'>Erase</li>
    
  13. 			</ul>
    
  14. 		</div>
    
  15. 		<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js'></script>
    
  16. 		<script>
    
  17. 			function DeathrayMenuController($scope){
    
  18. 				/*$scope.menuState.show = false; //Switch this line with the one below
    
  19. 				$scope.menuState = {show: false}; 
    
  20.  
  21. 				$scope.toggleMenu = function(){
    
  22. 					$scope.menuState.show = !$scope.menuState.show;
    
  23. 				}
    
  24.  
  25. 				$scope.erase = function(){
    
  26. 					window.alert('erased');
    
  27. 				}
    
  28.  
  29. 				$scope.disintergrate = function(){
    
  30. 					window.alert('Disintergrated');
    
  31. 				}
    
  32.  
  33. 				$scope.stun = function(){
    
  34. 					window.alert('Stunned');
    
  35. 				}
    
  36. 			}
    
  37. 		</script>
    
  38. 		<!--<script type='text/javascript' src='controllers.js'></script>-->	
    
  39. 	</body>
    
  40. </html>

One thought on “Cannot set property ‘show’ of undefined at new DeathrayMenuController – AngularJS

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.