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.

score 3 · Answer 1 · edited Jan 21 '16 at 15:50

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 '16 at 15:50

Corey

5,818
2
24
37

answered Jan 21 '16 at 14:36

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

378
1
10

1

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`? – froginvasion Jan 21 '16 at 15:08
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. – jet miller Jan 21 '16 at 15:17
@froginvasion take a look at this http://stackoverflow.com/questions/25266555/using-this-instead-of-scope-with-angularjs-controllers-and-directives for your last question and https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functionsfor arrow functions (=>) – Miguel Lattuada Jan 21 '16 at 15:26
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. – jet miller Jan 21 '16 at 15:27
'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() – Ильяс Гарифуллин Jan 21 '16 at 15:32
ok, you are right, but now i get the error: this.images is undefined. it is in the setUrlForImage method. i removed the succ:any parameter but the error still remains – jet miller Jan 21 '16 at 15:53
@froginvasion For the `=>` fat arrow function, you have take a look of the post. http://stackoverflow.com/questions/34274520/whats-the-meaning-of-in-typescript-fat-arrow – Shaohao Jan 21 '16 at 17:08

angular controller in typescript

1 Answers1