如何使用从工厂/控制器promise返回的图像url更新angular ng src

Question

在我的应用程序中，我有一个控制器，它从一个视图中获取由推特句柄组成的用户输入，并通过控制器将其传递到我的工厂，在那里它被发送到我的后端代码，在那里进行一些API调用，最终我想返回一个图像url。

我可以从我的服务器上获取图像url，但我一直在花很长时间试图将其附加到另一个视图中。我试着在这里找到了$scope和其他不同的建议，但我仍然无法让它发挥作用。

我尝试过做不同的事情来尝试将图片插入到html视图中。我试过注入$scope并用它玩，但仍然没有骰子。我尽量不使用$scope，因为据我所知，最好不要滥用$scope而在视图中使用this和控制器别名（controllerAs）。

我可以验证我的控制器中返回的promise是我想在视图中显示的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;
});
};  
});

希望这能帮助你