Warum ist $ q im folgenden angularjs-Beispiel nicht definiert?

Question

An der Linie var deferred = $q.defer();

Wenn ich versuche, ein einfaches Formular mit dem folgenden Code zu übermitteln, die ich erhalte: TypeError: Unable to get property 'defer' of undefined or null reference.

angular.module('app').controller('enrollCtl', function enrollCtl($q, $http) 
{ 

    // Using 'Controller As' syntax, so we assign this to the vm variable (for viewmodel). 
    var vm = this; 
    // Bindable properties and functions are placed on vm. 

    vm.applicantData = { 
     FirstName: "", 
     Comment: "" 
    }; 

    vm.registerApplicant = function submitForm($q, $http) 
    { 

     console.log('posting data::' + vm.applicantData.FirstName) 
     var serverBaseUrl = "https://test.com/TestForm"; 
     var deferred = $q.defer(); 
     return $http({ 
      method: 'POST', 
      url: serverBaseUrl, 
      data: vm.applicantData 
     }).success(function (data, status, headers, cfg) 
     { 
      console.log(data); 
      deferred.resolve(data); 
     }).error(function (err, status) 
     { 
      console.log(err); 
      deferred.reject(status); 
     }); 
     return deferred.promise; 

    }; 

}) 

Answer 1

Sie haben $q und $http zweimal als Parameter deklarieren, einmal an dem Controller und einmal in Ihrer Funktion. Die Module werden nur in Ihren Controller injiziert, und die Parameter Ihrer Funktion (wo sie den Wert undefined haben, wenn Sie die Funktion mit nichts aufrufen) beschatten sie.

Beachten Sie, dass Sie should not use $q.deferred here anyway, nur das Versprechen zurückzukehren dass $http bereits gibt Ihnen:

vm.registerApplicant = function submitForm() { 
    console.log('posting data::' + vm.applicantData.FirstName) 
    return $http({ 
// ^^^^^^ 
     method: 'POST', 
     url: "https://test.com/TestForm", 
     data: vm.applicantData 
    }).success(function (data, status, headers, cfg) { 
     console.log(data); 
    }).error(function (err, status) { 
     console.log(err); 
    }); 
};