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

Question

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

ako*_*nsu 10

你永远不会定义$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>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Chr*_*ris 9

只是通过同一本书并遇到了这个问题.以为我会补充说以下工作原理:

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

Run Code Online (Sandbox Code Playgroud)

在阅读时遇到同样的问题.第一个答案没有真正清除的含糊之处在于它只是使用了下划线但是在这样做时在范围对象下创建了一个变量,而点运算符则设置了一个未声明的变量.这个答案似乎更恰当地反映了对后一种情况的纠正.谢谢 (2认同)

Answer 3

小智 6

勘误表显示了更正: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;
...

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，7 月前
查看次数：	7502 次
最近记录：	12 年，5 月前