How to update angular ng-src with image url returned from factory/controller promise?

Question

In my app I have a controller that takes a user input consisting of a twitter handle from one view and passes it along through my controller into my factory where it is sent through to my backend code where some API calls are made and ultimately I want to get an image url returned.

I am able to get the image url back from my server but I have been having a whale of a time trying to append it another view. I've tried messing around with $scope and other different suggestions I've found on here but I still can't get it to work.

I've tried doing different things to try and get the pic to be interpolated into the html view. I've tried injecting $scope and playing around with that and still no dice. I'm trying not to use $scope because from what I understand it is better to not abuse $scope and use instead this and a controller alias (controllerAs) in the view.

I can verify that the promise returned in my controller is the imageUrl that I want to display in my view but I don't know where I'm going wrong.

My controller code:

app.controller('TwitterInputController', ['twitterServices', function (twitterServices) {
  this.twitterHandle = null;
  // when user submits twitter handle getCandidateMatcPic calls factory function
  this.getCandidateMatchPic = function () {
    twitterServices.getMatchWithTwitterHandle(this.twitterHandle)
      .then(function (pic) {
        // this.pic = pic
        // console.log(this.pic)
        console.log('AHA heres the picUrl:', pic);
        return this.pic;
    });
  };
}]);

Here is my factory code:

app.factory('twitterServices', function ($http) {
  var getMatchWithTwitterHandle = function (twitterHandle) {
    return $http({
      method: 'GET',
      url: '/api/twitter/' + twitterHandle
    })
    .then(function (response) {
      return response.data.imageUrl;
    });
  };
  return {
    getMatchWithTwitterHandle: getMatchWithTwitterHandle,
  };
});

this is my app.js

var app = angular.module('druthers', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/');
  $stateProvider
  .state('/', {
    url: '/',
    templateUrl: 'index.html',
    controller: 'IndexController',
    controllerAs: 'index',
    views: {
       'twitter-input': {
        templateUrl: 'app/views/twitter-input.html',
        controller: 'TwitterInputController',
        controllerAs: 'twitterCtrl'
      },
       'candidate-pic': {
        templateUrl: 'app/views/candidate-pic.html',
        controller: 'TwitterInputController',
        controllerAs: 'twitterCtrl'
      }
    }
  });
});

Here is the view where I want to append the returned image url

<div class="col-md-8">    
  <img class="featurette-image img-circle" ng-src="{{twitterCtrl.pic}}"/>
</div>

score 0 · Answer 1 · answered Nov 04 '15 at 08:45

0

You can do as

app.controller('TwitterInputController', ['twitterServices', function    (twitterServices) {
this.twitterHandle = null;

// added
this.pic = '';
// when user submits twitter handle getCandidateMatcPic calls factory function
this.getCandidateMatchPic = function () {
twitterServices.getMatchWithTwitterHandle(this.twitterHandle)
  .then(function (pic) {
    // this.pic = pic
    // console.log(this.pic)
    console.log('AHA heres the picUrl:', pic);
    return this.pic;
});
};
}]);

html

<div class="col-md-8">
<div ng-controller='TwitterInputController as twitterCtrl'>     
<img class="featurette-image img-circle" ng-src="{{twitterCtrl.pic}}"/>
</div>
</div>

hope this may help you

answered Nov 04 '15 at 08:45

Jayant Patil

1,537
2
11
18

thanks for the suggestion @Jayant but it didn't work. Also, I don't think I need to add ng-controller in the html because I already specify that in my app.js file but I tried it anyways and it didn't make a difference. Any other ideas? – phizzy Nov 04 '15 at 08:58
I've tried something like that but to no avail, @Jayant. When I try to use $scope I'm getting more errors because of the promise chaining. From what I understand I should be able to use `this` and `controllerAs` but something is not right, maybe I'm out of scope or something.. – phizzy Nov 04 '15 at 09:13
@phizzy Can you create jsfiddle/plnkr demo – Jayant Patil Nov 04 '15 at 09:14
Your examples work, @Jayant, but it seems that my purposes are a bit more convoluted. I don't want to render an image by clicking a button. I need to update the view with the image url that I return from a promise. Do I have to use $apply somehow to bind the right `this` context? – phizzy Nov 04 '15 at 09:19
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/94177/discussion-between-phizzy-and-jayant-patil). – phizzy Nov 04 '15 at 09:25

score 0 · Answer 2 · answered Nov 04 '15 at 09:29

Here is working demo http://jsfiddle.net/r904fnb3/2/

angular.module('myapp', []).controller('ctrl', function($scope, $q){
var vm = this;
vm.image = '';
vm.setUrl = function(){
var deffered = $q.defer();
setTimeout(function(){
   deffered.resolve('https://angularjs.org/img/AngularJS-large.png');
}, 3000);    
//promise
deffered.promise.then(function(res){
    console.log(res);
    vm.image = res;
});
};  

});

hope this may help you

How to update angular ng-src with image url returned from factory/controller promise?

2 Answers2