Question

我刚开始使用AngularJS。但是，为什么这不起作用？

加载网页后，我进入Uncaught ReferenceError: $scope is not defined行81的{{1}} $scope.processForm = function() {帮忙？

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

Answer 1

将控制器内的空$scope.processForm（function formController($scope, $http)）替换为当前外部的$scope。

在控制器内部，它可以访问您注入的{{1}}。

未捕获的ReferenceError：未定义$ scope - AngularJS

1 个答案: