angular controller in typescript

Question

I am new to typescript/ecma6 and would like to write this angular controller in typescript:

.controller('DashCtrl', function($scope, wpFactory) {

$scope.posts = [];
$scope.images = {};

wpFactory.getPosts(3).then(function (succ) {
  $scope.posts = succ;
  angular.forEach(succ, function(value, index) {
    $scope.setUrlForImage(index, value.featured_image);
  });
}, function error(err) {
  console.log('Errror: ', err);
});

$scope.setUrlForImage = function(index, id) {
  wpFactory.getMediaDataForId(id).then(function (succ) {
    $scope.images[index] = succ.source_url;
  });
};

})

with my actual approach I have problems with the scope of the methods in the class:

class DashCtrl {

public $inject = ['wpFactory'];

posts: any[];
images: any[];

constructor(public wpFactory: any) {
  this.getPosts();
}
getPosts(){
  ... ?
}

setUrlForImage(succ:any, index:any, id:any){
  ... ?
}

}

The interesting part for me is how to develop the getPosts and the setUrlForImages method. Any suggestions would be appreciated.

Corey · Accepted Answer · 2016-01-21 15:50:28Z

3

class DashCtrl {

  public $inject = ['wpFactory'];

  posts: any[];
  images: any[];

  constructor(public wpFactory: any) {
    this.getPosts();
  }

  getPosts() {
    this.wpFactory.getPosts(3).then(succ => {
      this.posts = succ;
      angular.forEach(succ, (value, index) => {
        this.setUrlForImage(index, value.featured_image);
      });
    }, (err) => {
      console.log('Errror: ', err);
    });
  }

  setUrlForImage(succ:any, index:any, id:any) {
    this.wpFactory.getMediaDataForId(id).then(succ => {
      this.images[index] = succ.source_url;
    });
  }
}

edited Jan 21, 2016 at 15:50

Corey

5,8282 gold badges26 silver badges37 bronze badges

answered Jan 21, 2016 at 14:36

Ильяс Гарифуллин

3781 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

froginvasion Over a year ago

Fix formatting? Also: maybe give some info about the => syntax in TypeScript. Also question from my part, don't you need something special in configuration to allow TS Classes that can access $scope with using this?

jet miller Over a year ago

hello guys, thank you for your answers. unfortunately both solutions did not work. my problem with your actual code for this.setUrlImage in getPosts() is: ts2346 - the supplied parameters do not match any signature of call target. and the generated code my wanted id for the call of the rest-service is undefined.

Miguel Lattuada Over a year ago

@froginvasion take a look at this stackoverflow.com/questions/25266555/… for your last question and developer.mozilla.org/en/docs/Web/JavaScript/Reference/… arrow functions (=>)

jet miller Over a year ago

i think the 'this' from this.setUrlImage in getPosts() is not able to access the class... but i don't know how to do it.

Ильяс Гарифуллин Over a year ago

'this' is links to current class instance in getPosts, and can access to setUrlForImage function if you call getPosts method from class instance like this: dashCtrlInstance.getPosts()

|

Collectives™ on Stack Overflow

angular controller in typescript

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related