Инициализация элемента контроллера AngularJS

Question

Я пытаюсь создать форму html/angularjs, которая отправляет данные на мой веб-сервер. Страница загружает контроллер, потому что он выполняет функцию отправки. Я получаю ошибку "ReferenceError: formData is not defined", когда я ссылаюсь на данные formData. Я думал, что это правильный способ инициализации членов контроллера.

var app = angular.module('messagingForm', []); 
app.controller('messagingController', function($scope, $http) { 
    $scope.formData = { 
    userName: "bob", 
    email: "bob@bob.com", 
    subject: "why", 
    message: "why not?" 
    }; 

    $scope.submitted = false; //used so that form errors are shown only after the form has been submitted 
    $scope.submit = function(sendContact) { 
    $scope.submitted = true; 

    console.log('validating data'); 
    if (sendContact.$valid) { 
     console.log('sending data'); 
     $http({ 
     method: 'post', 
     url: 'email.php', 
     data: { 
      'name': formData.userName, 
      'email': formData.email, 
      'subject': formData.subject, 
      'message': formData.message 
     }, 
     headers: { 
      'Content-Type': 'application/x-www-form-urlencoded' 
     } //set the headers so angular passing info as form data (not request payload) 
     }).success(function(data) { 

     }); 
    } else { 

     console.log('validating not good'); 
     alert('failed'); 
    } 
    } 
}); 

Непонятно, как я инициализирую переменную-член, я думаю. Каков правильный способ сделать это?

Мэтт.

Answer 1

Try с этим:

Изменение:

data: { 
     'name': formData.userName, 
     'email': formData.email, 
     'subject': formData.subject, 
     'message': formData.message 
    }, 

в

data: { 
    'name': $scope.formData.userName, 
    'email': $scope.formData.email, 
    'subject': $scope.formData.subject, 
    'message': $scope.formData.message 
}, 

Тогда:

var app = angular.module('messagingForm', []); 
 
app.controller('messagingController', function($scope, $http) { 
 
    $scope.formData = { 
 
    userName: "bob", 
 
    email: "bob@bob.com", 
 
    subject: "why", 
 
    message: "why not?" 
 
    }; 
 

 
    $scope.submitted = false; //used so that form errors are shown only after the form has been submitted 
 
    $scope.submit = function(sendContact) { 
 
    $scope.submitted = true; 
 

 
    console.log('validating data'); 
 
    if (sendContact.$valid) { 
 
     console.log('sending data'); 
 
     $http({ 
 
     method: 'post', 
 
     url: 'email.php', 
 
     data: { 
 
      'name': $scope.formData.userName, 
 
      'email': $scope.formData.email, 
 
      'subject': $scope.formData.subject, 
 
      'message': $scope.formData.message 
 
     }, 
 
     headers: { 
 
      'Content-Type': 'application/x-www-form-urlencoded' 
 
     } //set the headers so angular passing info as form data (not request payload) 
 
     }).success(function(data) { 
 

 
     }); 
 
    } else { 
 

 
     console.log('validating not good'); 
 
     alert('failed'); 
 
    } 
 
    } 
 
});

Потому что в вашем коде «formaData» он не существует в контексте. Вы можете попробовать также объявить локальную переменную, что-то вроде этого:

var formData = { 
    userName: "bob", 
    email: "bob@bob.com", 
    subject: "why", 
    message: "why not?" 
}; 

Пример:

var app = angular.module('messagingForm', []); 
app.controller('messagingController', function ($scope, $http) { 
    var formData = { 
     userName: "bob", 
     email: "bob@bob.com", 
     subject: "why", 
     message: "why not?" 
    }; 

    $scope.submitted = false; //used so that form errors are shown only after the form has been submitted 
    $scope.submit = function(sendContact) { 
     $scope.submitted = true; 

     console.log('validating data'); 
     if (sendContact.$valid) { 
      console.log('sending data'); 
      $http({ 
       method : 'post', 
       url  : 'email.php', 
       data : { 
        'name': formData.userName, 
        'email': formData.email, 
        'subject': formData.subject, 
        'message': formData.message 
       }, 
       headers : { 'Content-Type': 'application/x-www-form-urlencoded' } //set the headers so angular passing info as form data (not request payload) 
      }).success(function(data){ 

      }); 
     } else { 

      console.log('validating not good'); 
      alert('failed'); 
     } 
    } 
}); 

Answer 2

Вы также можете создать formData объект как константу, а затем явно передать его в контроллер.

var app = angular.module('messagingForm', []).constant("formData", { 
    'userName': 'bob', 
    'email': 'bob@bob.com', 
    'subject': 'why', 
    'message': 'why not?' 
}); 
app.controller('messagingController', function($scope, $http, formData) { 

Остальной ваш код здесь ...

Это просто делает его немного понятнее и проще тестировать.