0

I am very (very) new to AngularJS so if you can please explain solutions and suggestions that would help loads!

I am trying to make a directive which is passed a parameter - in my case championID to then use for a API call.

The API call works and returns back the correct data the only issue i am having is trying to put this in the template and return it.

The error message i am getting is

Reference error: championURL is not defined

my directive is below:

.directive('championImage', function() {
  return {
    restrict: 'E',
      link: function($scope, iElm, iAttrs, controller) {
      $scope.championId = iAttrs.championId;
      $http.get('https://global.api.pvp.net/api/lol/static-data/euw/v1.2/champion/'+ championId +'?champData=image&api_key=<removed for stack overflow>').success(function(data){
        $scope.championURL = '<img src="http://ddragon.leagueoflegends.com/cdn/5.22.3/img/champion/'+ data.image.sprite +'"/>';
      }).error(function(data){
        console.warn('Incorrect username entered or max queries hit');
      });
  },
  template: championURL
};
});

Any ideas where I am going wrong,

Thanks,

Kieran

Kieranmv95
  • 828
  • 4
  • 14
  • 31

2 Answers2

1

I would bind the src to the template, and in the link function when the http request returns, update the binded variable:

Understanding AngularJS ng-src

Havent tested, but i think thats the way

Community
  • 1
  • 1
Ágoston Székely
  • 242
  • 1
  • 10
0

Change

From:

template: championURL

To:

template: $scope.championURL
Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
  • this returns `$scope is not defined` – Kieranmv95 Nov 20 '15 at 09:37
  • You dont have a $scope in the directive definition, only inside the link function. – Ágoston Székely Nov 20 '15 at 09:40
  • "Directives that want to modify the DOM typically use the link option to register DOM listeners as well as update the DOM. It is executed after the template has been cloned and is where directive logic will be put." So first your template will be loaded, then the link function. – Ágoston Székely Nov 20 '15 at 09:43
  • @ÁgostonSzékely I see what you mean thanks, any ideas on what would be a good way to look at working this in, as i said i am new to angular – Kieranmv95 Nov 20 '15 at 09:51