Fehler in AngularJS

Question

Fehler kann nicht festgelegt werden Ich bin neu in Angular, also denke ich, ich mache einige dumme Fehler, aber immer noch nicht, um es zu bekommen. Ich habe einen Dienst erstellt, um einige Daten zu holen, dann habe ich den Dienst in meinen Controller injiziert.

Service -

.service('getAllCompanies', ['$http', function ($http) { 
    // AngularJS will instantiate a singleton by calling "new" on this function 
    var url = "http://localhost:8000/companies/?page="; 
    this.getCompanies = function(p) { 
     return $http.get(url+p); 
    }; 
    }]); 

-Controller -

.controller('CompaniesallCtrl', ['getAllCompanies', function (companiesService) { 
    var pageNumber = 1; 
    this.companiesNumber = ""; 
    companiesService.getCompanies(pageNumber) 
     .then(function(response){ 
      console.log(response.data.count); 
      this.companiesNumber = response.data.count; 
     }, function(error) { 
      console.log(error); 
     }) 
    }]); 

Ich erhalte diesen Fehler in der Konsole -

TypeError: Cannot set property 'companiesNumber' of undefined 
    at companiesall.js:17 
    at processQueue (angular.js:16170) 
    at angular.js:16186 
    at Scope.$eval (angular.js:17444) 
    at Scope.$digest (angular.js:17257) 
    at Scope.$apply (angular.js:17552) 
    at done (angular.js:11697) 
    at completeRequest (angular.js:11903) 
    at XMLHttpRequest.requestLoaded (angular.js:11836) 

Die console.log (response.data.count) gibt das richtige Ergebnis, also bin ich verwirrt warum zeigt es undefiniert. Bitte helfen Sie!

Answer 1

Sie könnte auch Ihre Controller als Variable im Rahmen der Funktion gesetzt .

Etwas wie:

.controller('CompaniesallCtrl', ['getAllCompanies', function (companiesService) { 
    var pageNumber = 1; 
    var ctrl = this; 
    ctrl.companiesNumber = ""; 
    companiesService.getCompanies(pageNumber) 
     .then(function(response){ 
      console.log(response.data.count); 
      ctrl.companiesNumber = response.data.count; 
     }, function(error) { 
      console.log(error); 
     }) 
}]); 

Answer 2

Ich denke, Sie verwenden strict mode? Dann Kontext innerhalb von then Callback wird globales Objekt sein, aber this ist in der Tat undefined. Verwenden Sie arrow function die lexikalischen Gültigkeitsbereich erhalten werden (Controller-Instanz in diesem Fall):

companiesService.getCompanies(pageNumber) 
    .then(response => { 
     console.log(response.data.count); 
     this.companiesNumber = response.data.count; 
    }, function(error) { 
     console.log(error); 
    }) 

Oder bind Kontext zu beheben:

companiesService.getCompanies(pageNumber) 
    .then(function(response) { 
     console.log(response.data.count); 
     this.companiesNumber = response.data.count; 
    }.bind(this), function(error) { 
     console.log(error); 
    })