AngularJS的承诺？

Question

I am using angular-fullstack to create an app. In my app, I use the Yelp API to get search results, which I want to store in a variable (Note: this.searchTerm is changed via an ng-model in the HTML):

'use strict';

(function() {

class MainController {

  constructor($http) {
    this.$http = $http;
    this.awesomeThings = [];
    this.searchTerm = "";
    this.data = [];
  }

  addThing() {
    this.$http.get('/api/messages/city/' + this.searchTerm).success(function(res){
      this.data = res;
    });
  };
}

angular.module('nightlifeApp').controller('MainController', MainController);})();

When I do so, I get an error that this.data is not defined. I understand that this is do to the nature of async calls, but how can I fix this?

Thanks

Answer 1

The this keyword is undefined inside a .then function in strict mode. Set a local variable to reference the this binding inside the then function.

'use strict';

(function() {

class MainController {

  constructor($http) {
    this.$http = $http;
    this.awesomeThings = [];
    this.searchTerm = "";
    this.data = [];
  }

  addThing() {
    var self = this;
    this.$http.get('/api/messages/city/' + this.searchTerm).then (function(res){
      self.data = res.data;
    });
  };
}

angular.module('nightlifeApp').controller('MainController', MainController);})();

Also the .success method is deprecated . Use .then instead.