AngularJS $ scope.variable non è definito

Question

Perdonare il mio nuovo arrivato ma non riesco a capirlo. Perché il mio $ scope.new_prompt è indefinito quando si fa clic su invia modulo? Riesco a vedere la variabile che viene aggiornata mentre digito (in) ma quando faccio clic su Invia, i registri della console sono "indefiniti".

Vista:

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

Controller:

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 
      }, ]; 
     } 
    ]); 

edit:

soluzione Ved ottenuto lavorando. Ora io non capisco il motivo per cui doveva essere fatto così quando questo funziona:

<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) 
}; 

esempio di lavoro di edit: http://jsfiddle.net/fuczak/dLcLkycb/

EDIT 2:

il problema si trova all'interno ng-se direttiva . Crea il proprio ambito figlio, ed è qui che si trova 'new_prompt', non nello scope HomeCtrl genitore.

Answer 1

Ci sono due modi per risolvere il tuo errore.
caso 1: Passare il tuo modello di come un parametro alla funzione:

HTML:

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

JavaScript:

$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 
        }); 
       }); 
      }; 

CASO 2: Definire: scope.new_prompt= {}, dentro il controller