All geek questions in one place

Unable to set Undefined Member property

Moving to AngularJS , I get a JavaScript error in line // ERROR below.

Why do I get Cannot set property 'show' of undefined ?

 <html ng-app> <body> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"> </script> <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='disintegrate()'>Disintegrate</li> <li ng-click='erase()'>Erase from history</li> </ul> <div/> <script> function DeathrayMenuController($scope) { $scope.menuState.show = false; // ERROR HERE $scope.toggleMenu = function() { $scope.menuState.show = !$scope.menuState.show; }; } </script> </body> </html>
+6
source share
3 answers

you never define $scope.menuState . Instead, consider:

 <html ng-app> <body> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> <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='disintegrate()'>Disintegrate</li> <li ng-click='erase()'>Erase from history</li> </ul> <div/> <script> function DeathrayMenuController($scope) { $scope.menuState_show = false; $scope.toggleMenu = function() { $scope.menuState_show = !$scope.menuState_show; }; } </script> </body> </html>
+10
source

Just working through the same book and encountering this problem. I think I would add that the following works:

 <html ng-app> <body> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"> </script> <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='disintegrate()'>Disintegrate</li> <li ng-click='erase()'>Erase from history</li> </ul> <div/> <script> function DeathrayMenuController($scope) { $scope.menuState = {show: false}; // ERROR HERE $scope.toggleMenu = function() { $scope.menuState.show = !$scope.menuState.show; }; } </script> </body> </html>
+9
source

Errata shows the correction: http://oreilly.com/catalog/errata.csp?isbn=0636920028055

 $scope.menuState.show = false; will give an undefined error Added $scope.menuState = {} before to fix the issue ie function DeathrayMenuController($scope) { $scope.menuState = {} $scope.menuState.show = false; ...
+6
source

Source: https://habr.com/ru/post/946633/

More articles:


All Articles