无法设置未定义成员的属性

Cannot Set Property of Undefined Member

本文关键字：属性 成员 未定义 设置      更新时间：2023-09-26

在AngularJS中继续前进，我在下面的// ERROR行得到一个JavaScript错误。

为什么我得到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>

您从未定义过$scope.menuState。而不是考虑:

<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>

我在看同一本书的时候遇到了这个问题。我想我应该补充一下，下面的方法也可以:

<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>

勘误表显示更正: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 i.e.
function DeathrayMenuController($scope) {
  $scope.menuState = {} 
  $scope.menuState.show = false;
...
相关文章：