2013-06-06 21 views
6

AngularJS में साथ चल रहा है, मुझे नीचे // ERROR लाइन पर एक जावास्क्रिप्ट त्रुटि मिलती है।अपरिभाषित सदस्य की संपत्ति सेट नहीं कर सकता

मुझे 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> 

उत्तर

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

बस, जबकि पढ़ने यह एक ही मुद्दा बारे में जाना। अस्पष्टता कि पहला जवाब वास्तव में स्पष्ट नहीं हुआ था कि यह सिर्फ एक रेखांकन का उपयोग करता था लेकिन ऐसा करने में स्कोप ऑब्जेक्ट के तहत एक चर बनाया गया था, जबकि डॉट ऑपरेटर एक अविकसित चर सेट कर रहा था। यह जवाब बाद की स्थिति को सुधारने के लिए उचित रूप से प्रतिबिंबित करना प्रतीत होता था। धन्यवाद – tsurantino

6

Errata सुधार दिखाता है: 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; 
... 
+0

लिंक साझा करने के लिए धन्यवाद। मैं मुद्दों को हल कर रहा हूं क्योंकि मुझे लगता है (जो अब तक हर पृष्ठ में काफी अधिक रहा है)। यह एक अच्छी किताब है, लेकिन इसमें बहुत सारी त्रुटियां हैं। –

संबंधित मुद्दे