'undefiniert' mit $ http in .service von AngularJS

Question

Dank einiger Experten, die mir vor ein paar Stunden geholfen haben, konnte ich zum nächsten Level übergehen. Hier habe ich wahrscheinlich ein triviales Problem, aber für einen Anfänger wie mich ist es schwierig.

Wie der Titel darstellt, wurde ich mit 'get' von undefined zurückgegeben, obwohl ich $ http.get verwendet habe, was in anderen Funktionen gut funktioniert hat.

Was vermisse ich oder mache ich falsch? Könnte mir jemand helfen?

[ERROR MSG]

TypeError: Cannot read property 'get' of undefined

[app.js]

(function() { 
'use strict'; 
angular.module('myProject', [ 
]) 
.service('ProjectService', function($http) { 
    var pjts = {}; 
    this.$http.get("projects_read.php", {}). // I have'get' here. 
    .then(function(response){ 
     var pjts = response.data; 
     this.getProjects = function() { 
      return pjts; 
     }; 
    }); 
    this.getProjects = function() { 
     return pjts; 
    }, 
    this.getProject = function(id) { 
     for (var i = 0; i < pjts.length; i++) { 
      if (pjts[i].id === id) { 
      return pjts[i]; 
      } 
     } 
     return null; 
    } 
}.bind(this)) 
})(); 

Vielen Dank im Voraus und hoffen, dass Sie einen großen Tag!

Answer 1

Zuerst entfernen Sie die .bind(this) vom Ende Ihrer Funktion. Abgesehen davon, dass es eine ganze Reihe anderer potentieller Probleme verursacht, führt es wahrscheinlich dazu, dass Angulars Abhängigkeitsinjektion nicht injiziert wird $http.

Auch $http ist nur ein Parameter für Ihre Funktion. Es wird nicht zu this hinzugefügt, also sollten Sie es nicht unter this anrufen.

Auch die this innerhalb Ihrer then Handler wird nicht zeigen, wo Sie es wollen. Wenn Sie this verwenden innen dort wollen, weisen Sie auf eine andere Variable und verwenden, die innerhalb des Handlers.

var self = this; 
// v------ this removed 
$http.get("projects_read.php", {}). // I have'get' here. 
.then(function(response){ 
    var pjts = response.data; 
    // v----- self here 
    self.getProjects = function() { 
     return pjts; 
    }; 
}); 

Answer 2

$ http ist nur ein übergebener Parameter in Service-Funktion, nicht an den Umfang der Service-Funktion zu binden. So können Sie entweder direkt verwenden (ohne this) wie:

$http.get("projects_read.php", {}).then(function(response){ 
    var pjts = response.data; 
    this.getProjects = function() { 
     return pjts; 
    }; 
}); 

OR,

wenn Sie wirklich this Syntax verwenden möchten, dann die param $ http bis zu einem gewissen Dienst scoped Variablen zuweisen, wie. :.

var self = this; 
self.http = $http; 
self.http.get("projects_read.php", {}).then(function(response){ 
     var pjts = response.data; 
     this.getProjects = function() { 
      return pjts; 
     }; 
    }); 

auch, ersetzen Sie alle this mit self den richtigen Rahmen zu verlieren zu vermeiden, und keine Notwendigkeit bind(this)

zu tun