如何使用工厂/控制器承诺返回的图像url更新角度ng-src?

时间:2015-11-04 08:41:44

标签: angularjs asynchronous controller promise angularjs-interpolate

在我的应用程序中,我有一个控制器,它从一个视图中获取一个包含Twitter句柄的用户输入,并将它通过我的控制器传递到我的工厂,然后将其发送到我的后端代码,在那里进行一些API调用,最终我想要返回一个图片网址。

我能够从我的服务器上获取图像网址,但我一直有一条鲸鱼试图将其附加到另一个视图中。我已经尝试弄乱我在这里找到的范围和其他不同的建议,但我仍然无法让它工作。

我尝试过做不同的事情来尝试将图片内插到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'
      }
    }
  });
});

以下是我想要追加返回的图片网址的视图

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

2 个答案:

答案 0 :(得分:0)

你可以这样做

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

HTML

class Htmlplus extends CI_html {

    public function show(){
        //show html header
    }

}

希望这可以帮到你

答案 1 :(得分:0)

以下是工作演示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;
});
};  

});

希望这可以帮到你