AngularJS $ scope.variable - undefined

Forgive my novelty, but I cannot understand. Why is my $ scope.new_prompt undefined when I click on the submit button? I can see that the variable is updated as you type (in <p>{{new_prompt}}</p> ), but when I click the "Submit" button, the console logs are "undefined".

View:

 <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

Ved's solution worked. Now I do not understand why this should have been done when this works:

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

Working editing example: http://jsfiddle.net/fuczak/dLcLkycb/

EDIT 2:

The problem lies with the ng-if directive. It creates its own child region and that where the "new_prompt" is located, and not in the parent region of HomeCtrl.

+5
source share
1 answer

There are two ways to resolve your error.
case 1: pass your model as a parameter to work:

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

CASE 2: Define: scope.new_prompt= {}, inside your controller

+5
source

Source: https://habr.com/ru/post/1212605/


All Articles