【发布时间】:2015-10-12 21:24:10
【问题描述】:
我正在尝试使用 Ionic/AngularJS 框架为移动应用创建 Facebook 墙提要。我需要帮助才能在我的粉丝专页上检索已发布照片的直接图片链接。 JSON 数据中的 picture 对象显示原始照片的非常小的缩略图,因此如果我使用 CSS 增加尺寸,它会降低质量。我使用的是 link 值 URL作为 img ng-src 但不显示任何内容,因为链接不是图像本身,而是 facebook 上帖子的链接。
以下是我的代码, 内景:
<ion-content padding="true" ng-controller="FacebookCtrl" class="has-footer">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search..." ng-model="query" >
</label>
<ion-list ng-repeat="item in news | filter:query | limitTo:20">
<ion-item ng-if="item.type == 'photo'">
<h2 >{{item.caption}}</h2>
<p>{{item.message}}</p>
<img ng-src="{{item.link}}"/><br>
<i class="icon ion-android-favorite"></i> {{item.likes.data.length}} Pelqime
<p>Publikuar me: {{item.created_time | date: 'medium' }} </p>
</ion-item>
<ion-item ng-if="item.type == 'link'">
<h2 >{{item.name}}</h2>
<p>{{item.message}}</p>
<img ng-src="{{item.picture}}"/><br>
<i class="icon ion-android-favorite"></i> {{item.likes.data.length}} Pelqime
<p>Publikuar me: {{item.created_time | date: 'medium' }} </p>
</ion-item>
<ion-item ng-if="item.type == 'video'">
<h2 >{{item.name}}</h2>
<p>{{item.message}}<br>
{{item.source}}
</p>
<video width="400" controls src="{{item.source}}">Your browser does not support HTML5 video.
</video>
<i class="icon ion-android-favorite"></i> {{item.likes.data.length}} Pelqime
<p>Publikuar me: {{item.created_time | date: 'medium' }} </p>
</ion-item>
</ion-list>
</ion-content>
控制器:
.controller('FacebookCtrl',function($scope,$http){
$http.get('https://graph.facebook.com/radioopendimi/feed?access_token=APP_ID|APP_Secret').then(function(resp){
$scope.news = resp.data.data;
console.log('Success: ',resp);
}, function(err){
console.error('Error: ',err);
});
});
【问题讨论】:
标签: javascript angularjs facebook facebook-graph-api ionic-framework