2016-07-09 8 views
3

私はAngularを初めて使用していますので、私は間違いを犯していると思いますが、 私はいくつかのデータを取得するためのサービスを作成した後、自分のコントローラにサービスを注入しました。AngularJSで「未定義のプロパティを設定できません」というエラーが発生しました

サービス -

.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('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); 
     }) 
    }]); 

私はコンソールでこのエラーを取得しています -

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) 

はconsole.log(response.data.count)を提供します正しい結果であるので、私はなぜそれが未定義であるのか混乱しています。助けてください!

+1

するvar自己=この; self.compainesNumber = ""; companiesService.getCompanies(pageNumber) .then(function(response){ self.companiesNumber = response.data.count; }); –

+0

ありがとうございます、それは動作します。 – doctorsherlock

答えて

2

あなたは可能性も設定あなたのコントローラーを。

ような何か:

.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); 
     }) 
}]); 
2

strict modeを使用していると思いますか?コンテキスト内のthenコールバックはグローバルオブジェクトになりますが、thisは実際にundefinedです。 (この場合には、コントローラインスタンス)レキシカルスコープを維持することをarrow functionを使用します。

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

またはbindをコンテキスト修正するために:関数のスコープ内の変数として

companiesService.getCompanies(pageNumber) 
    .then(function(response) { 
     console.log(response.data.count); 
     this.companiesNumber = response.data.count; 
    }.bind(this), function(error) { 
     console.log(error); 
    }) 
関連する問題