कोणीयजेएस $ scope.variable अपरिभाषित

Question

मेरी नवीनता क्षमा करें लेकिन मैं इसे समझ नहीं सकता। सबमिट फॉर्म पर क्लिक करते समय मेरा $ scope.new_prompt अपरिभाषित क्यों है? मैं वैरिएबल को अपडेट कर रहा हूं जैसे कि मैं टाइप करता हूं (<p>{{new_prompt}}</p> में) लेकिन जब मैं सबमिट करता हूं, तो कंसोल लॉग 'अपरिभाषित' होता है।

दृश्य:

<div class="panel" ng-if="isAuthenticated()"> 
    <div class="panel-body"> 
     <h2 class="text-center">Add a prompt</h2> 
     <form method="post" ng-submit="submitPrompt()" name="promptForm"> 
      <div class="form-group has-feedback"> 
       <input class="form-control input-lg" type="text" name="prompt" ng-model="new_prompt" placeholder="Imagine if..." required autofocus> 
       <span class="ion-edit form-control-feedback"></span> 
      </div> 
      <p>{{new_prompt}}</p> 
      <button type="submit" ng-disabled="promptForm.$invalid" class="btn btn-lg btn-block btn-success">Add prompt</button> 
     </form> 
    </div> 
</div> 

नियंत्रक:

angular.module('Prompts') 
    .controller('HomeCtrl', ['$scope', '$auth', 'Prompt', '$alert', '$rootScope', 
     function($scope, $auth, Prompt, $alert, $rootScope) { 
      $scope.isAuthenticated = function() { 
       return $auth.isAuthenticated(); 
      }; 
      $scope.submitPrompt = function() { 
       console.log($scope.new_prompt); 
       Prompt.submitPrompt({ 
        idea: $scope.new_prompt, 
        user: $rootScope.user 
       }).then(function() { 
        $alert({ 
         content: 'Prompt has been added', 
         animation: 'fadeZoomFadeDown', 
         type: 'material', 
         duration: 3 
        }); 
       }); 
      }; 
      $scope.stories = [{ 
       prompt: 'Prompt 1', 
       author: 'blank', 
       upvotes: 0 
      }, { 
       prompt: 'Prompt 2', 
       author: 'klanb', 
       upvotes: 1 
      }, { 
       prompt: 'Prompt 3', 
       author: 'balbunk', 
       upvotes: 2 
      }, ]; 
     } 
    ]); 

संपादित करें:

वेद के समाधान काम कर समझ में आ गया। अब मुझे समझ नहीं आता क्यों ऐसा किया जाना था जब यह काम करता है:

<div class="panel"> 
    <form ng-submit="printText()"> 
     <input type="text" ng-model="justTest"> 
     <button type="submit" class="btn"></button> 
    </form> 
</div> 

$scope.printText = function() { 
    console.log($scope.justTest) 
}; 

संपादित का कार्य उदाहरण: http://jsfiddle.net/fuczak/dLcLkycb/

संपादित करें 2:

समस्या

भीतर एनजी-अगर निर्देश निहित है । यह अपने बच्चे के दायरे का निर्माण करता है, और यही वह जगह है जहां 'new_prompt' स्थित है, माता-पिता HomeCtrl स्कोप में नहीं।

Answer 1

आपकी गलती को हल करने के दो तरीके हैं।
मामले 1: समारोह के लिए एक पैरामीटर के रूप में अपने मॉडल दर्रा:

HTML:

<form method="post" ng-submit="submitPrompt(new_prompt)" name="promptForm"> 

जावास्क्रिप्ट:

$scope.submitPrompt = function(data) { 
     $scope.new_prompt=data; 
       console.log($scope.new_prompt); 
       Prompt.submitPrompt({ 
        idea: $scope.new_prompt, 
        user: $rootScope.user 
       }).then(function() { 
        $alert({ 
         content: 'Prompt has been added', 
         animation: 'fadeZoomFadeDown', 
         type: 'material', 
         duration: 3 
        }); 
       }); 
      }; 

केस 2: परिभाषित करें: scope.new_prompt= {}, अपने नियंत्रक

अंदर