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

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

Leave a Reply