I'm new to using AngularJS. However, why isn't this working?
Upon loading the webpage, I get in the console Uncaught ReferenceError: $scope is not defined on Line 81 which is $scope.processForm = function() { Help?
// define angular module/app
var formApp = angular.module('formApp', []);
// create angular controller and pass in $scope and $http
function formController($scope, $http) {
// create a blank object to hold our form information
// $scope will allow this to pass between controller and view
$scope.formData = {};
// process the form
$scope.processForm = function() {};
}
// process the form
$scope.processForm = function() {
$http({
method: 'POST',
url: 'process.php',
data: $.param($scope.formData), // pass in data as strings
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
} // set the headers so angular passing info as form data (not request payload)
})
.success(function(data) {
console.log(data);
if (!data.success) {
// if not successful, bind errors to error variables
$scope.errorName = data.errors.name;
$scope.errorSuperhero = data.errors.superheroAlias;
} else {
// if successful, bind success message to message
$scope.message = data.message;
}
});
};<!-- LOAD ANGULAR -->
<script src="//ajax.googleapis/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<!-- LOAD BOOTSTRAP CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- LOAD JQUERY -->
<script src="//ajax.googleapis/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<body ng-app="formApp" ng-controller="formController">
<div class="container">
<div class="col-sm-6 col-sm-offset-3">
<!-- PAGE TITLE -->
<div class="page-header">
<h1><span class="glyphicon glyphicon-tower"></span> Submitting Forms with Angular</h1>
</div>
<!-- SHOW ERROR/SUCCESS MESSAGES -->
<div id="messages" ng-show="message">{{ message }}</div>
<!-- FORM -->
<form ng-submit="processForm()">
<!-- NAME -->
<div id="name-group" class="form-group" ng-class="{ 'has-error' : errorName }">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Bruce Wayne" ng-model="formData.name">
<span class="help-block" ng-show="errorName">{{ errorName }}</span>
</div>
<!-- SUPERHERO NAME -->
<div id="superhero-group" class="form-group" ng-class="{ 'has-error' : errorSuperhero }">
<label>Superhero Alias</label>
<input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader" ng-model="formData.superheroAlias">
<span class="help-block" ng-show="errorSuperhero">{{ errorSuperhero }}</span>
</div>
<!-- SUBMIT BUTTON -->
<button type="submit" class="btn btn-success btn-lg btn-block" ng-model="formData.XAlias">
<span class="glyphicon glyphicon-flash"></span> Submit!
</button>
</form>
</div>
</div>
<!-- SHOW DATA FROM INPUTS AS THEY ARE BEING TYPED -->
<pre>{{formData}}</pre>I'm new to using AngularJS. However, why isn't this working?
Upon loading the webpage, I get in the console Uncaught ReferenceError: $scope is not defined on Line 81 which is $scope.processForm = function() { Help?
// define angular module/app
var formApp = angular.module('formApp', []);
// create angular controller and pass in $scope and $http
function formController($scope, $http) {
// create a blank object to hold our form information
// $scope will allow this to pass between controller and view
$scope.formData = {};
// process the form
$scope.processForm = function() {};
}
// process the form
$scope.processForm = function() {
$http({
method: 'POST',
url: 'process.php',
data: $.param($scope.formData), // pass in data as strings
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
} // set the headers so angular passing info as form data (not request payload)
})
.success(function(data) {
console.log(data);
if (!data.success) {
// if not successful, bind errors to error variables
$scope.errorName = data.errors.name;
$scope.errorSuperhero = data.errors.superheroAlias;
} else {
// if successful, bind success message to message
$scope.message = data.message;
}
});
};<!-- LOAD ANGULAR -->
<script src="//ajax.googleapis./ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<!-- LOAD BOOTSTRAP CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn./bootstrap/3.0.2/css/bootstrap.min.css">
<!-- LOAD JQUERY -->
<script src="//ajax.googleapis./ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<body ng-app="formApp" ng-controller="formController">
<div class="container">
<div class="col-sm-6 col-sm-offset-3">
<!-- PAGE TITLE -->
<div class="page-header">
<h1><span class="glyphicon glyphicon-tower"></span> Submitting Forms with Angular</h1>
</div>
<!-- SHOW ERROR/SUCCESS MESSAGES -->
<div id="messages" ng-show="message">{{ message }}</div>
<!-- FORM -->
<form ng-submit="processForm()">
<!-- NAME -->
<div id="name-group" class="form-group" ng-class="{ 'has-error' : errorName }">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Bruce Wayne" ng-model="formData.name">
<span class="help-block" ng-show="errorName">{{ errorName }}</span>
</div>
<!-- SUPERHERO NAME -->
<div id="superhero-group" class="form-group" ng-class="{ 'has-error' : errorSuperhero }">
<label>Superhero Alias</label>
<input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader" ng-model="formData.superheroAlias">
<span class="help-block" ng-show="errorSuperhero">{{ errorSuperhero }}</span>
</div>
<!-- SUBMIT BUTTON -->
<button type="submit" class="btn btn-success btn-lg btn-block" ng-model="formData.XAlias">
<span class="glyphicon glyphicon-flash"></span> Submit!
</button>
</form>
</div>
</div>
<!-- SHOW DATA FROM INPUTS AS THEY ARE BEING TYPED -->
<pre>{{formData}}</pre>1 Answer
Reset to default 8Replace the empty $scope.processForm inside your controller (function formController($scope, $http)) with the one that's currently outside.
Inside the controller it'll have access to the $scope which you injected in.