Want to enable CORS in AngularJS? Try using the resource service to consume flickr jsonp:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | var MyApp = angular.module('MyApp', ['ng', 'ngResource']); MyApp.factory('flickrPhotos', function ($resource) { return $resource('http://api.flickr.com/services/feeds/photos_public.gne', { format: 'json', jsoncallback: 'JSON_CALLBACK' }, { 'load': { 'method': 'JSONP' } }); }); MyApp.directive('masonry', function ($parse) { return { restrict: 'AC', link: function (scope, elem, attrs) { elem.masonry({ itemSelector: '.masonry-item', columnWidth: $parse(attrs.masonry)(scope) }); } }; }); MyApp.directive('masonryItem', function () { return { restrict: 'AC', link: function (scope, elem, attrs) { elem.imagesLoaded(function () { elem.parents('.masonry').masonry('reload'); }); } }; }); MyApp.controller('MasonryCtrl', function ($scope, flickrPhotos) { $scope.photos = flickrPhotos.load({ tags: 'dogs' }); }); |
1 2 3 4 5 | <div class="masonry: 240;" ng-controller="MasonryCtrl"> <div class="masonry-item" ng-repeat="item in photos.items"> <img ng-src="{{ item.media.m }}" /> </div> </div> |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
