Как обновить angular ng-src с помощью URL-адреса изображения, возвращенного с заводского / контроллера обещания?

Question

В моем приложении у меня есть контроллер, который принимает пользовательский ввод, состоящий из дескриптора твиттера, из одного представления и передает его через мой контроллер в мою фабрику, где он отправляется в мой внутренний код, где выполняются некоторые вызовы API, и в конечном итоге я хочу получить URL-адрес изображения.

Я могу получить URL-адрес изображения с моего сервера, но у меня было огромное количество времени, пытаясь добавить к нему другой вид. Я пробовал возиться с $scope и другими предложениями, которые я нашел здесь, но я все еще не могу заставить его работать.

Я пытался делать разные вещи, чтобы попытаться получить изображение для интерполяции в представлении HTML. Я попытался ввести $scope и поиграться с этим, но до сих пор не играю в кости. Я пытаюсь не использовать $scope, потому что, насколько я понимаю, лучше не злоупотреблять $scope и использовать вместо этого this и псевдоним контроллера (controllerAs) в представлении.

Я могу убедиться, что обещание, возвращаемое в моем контроллере, - это imageUrl, который я хочу отобразить в своем представлении, но я не знаю, в чем я ошибаюсь.

Код моего контроллера:

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;
    });
  };
}]);

Вот мой заводской код:

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,
  };
});

это мой 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'
      }
    }
  });
});

Вот вид, где я хочу добавить возвращенный URL-адрес изображения

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

Answer 1

Вы можете сделать как

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>

надеюсь, это поможет вам

Answer 2

Вот рабочая демоверсия 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;
});
};  

});

надеюсь, это поможет вам