好的,所以我被一位同事要求查看他们编写的模块,以便在网站上显示他们帐户的Instagram Feed。该模块在Chrome,IE,Firefox中运行良好,但不适用于Safari。我看了看模板,一切看起来都很好。我完全不知道它会是什么。
从instagram中提取图像的代码是
angular.module("inkedRaskal", [])
// .filter('fromTo', function() {
// return function(input, from, total, lessThan) {
// from = parseInt(from);
// total = parseInt(total);
// for (var i = from; i < from + total && i < lessThan; i++) {
// input.push(i);
// }
// return input;
// }
// })
.factory('instagram', ['$http',
function($http) {
return {
fetchPopular: function(callback) {
var endPoint = "APIKEYFORUSER"; // can guarantee this is correct
$http.jsonp(endPoint).success(function(response) {
callback(response.data);
});
}
}
}
])
.controller("instagramController", function($scope, $interval, instagram) {
$scope.pics = [];
$scope.have = [];
$scope.orderBy = "-likes.count";
$scope.getMore = function() {
instagram.fetchPopular(function(data) {
//console.log(JSON.stringify(data));
for(var i=0; i<data.length; i++) {
if (typeof $scope.have[data[i].id]==="undefined") {
$scope.pics.push(data[i]) ;
$scope.have[data[i].id] = "1";
}
}
});
};
$scope.getMore();
// $scope.tags = [
// 'Bootstrap', 'AngularJS', 'Instagram', 'Factory'
// ]
});
模板代码(HTML)如下所示:
<div class="insta-container" ng-controller="instagramController">
<div ng-repeat="p in pics | limitTo: 7" class="col-sm-2 item-{{ $index }} instablocks" ng-class="{first: $first, last:$last}">
<a class="inst-link" href="{{p.link}}" target="_blank">
<img ng-src="{{p.images.standard_resolution.url}}" class="img-responsive" title="{{p.caption.text}}">
</a>
</div>
</div>
发生这种情况的页面是fedesignandconsulting.com(底部)。作为参考,我正在将Instagram的响应打印到控制台,供所有想要为我看一下的人使用。花了很多时间谷歌搜索,发现没有任何相关的具体。谢谢你!