在我的应用程序中,我有一个控制器,它从一个视图中获取一个包含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>
答案 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;
});
};
});
希望这可以帮到你