0

在我的应用程序中，我有一个控制器，它从一个视图中获取一个由 twitter 句柄组成的用户输入，并将其通过我的控制器传递到我的工厂，在那里它被发送到我的后端代码，在那里进行一些 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>
4

2 回答 2

0

你可以这样做

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>

希望这可以帮助你

于 2015-11-04T08:45:48.597 回答
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;
});
};  

});

希望这可以帮助你

于 2015-11-04T09:29:43.783 回答