Uncaught ReferenceError: $scope is not defined - AngularJS

Question

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.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<!-- LOAD BOOTSTRAP CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">

<!-- LOAD JQUERY -->
<script src="//ajax.googleapis.com/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>

KayakDave · Accepted Answer · 2013-11-19 04:16:31Z

8

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

edited Nov 19, 2013 at 4:16

answered Nov 19, 2013 at 4:06

KayakDave

24.7k3 gold badges68 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Uncaught ReferenceError: $scope is not defined - AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related