Tumblr Feed using AngularJS and OAuth.io -
i created angularjs app displays tumblr dashboard. issue have there not data being returned in browser. however, if refresh page , navigate different tab before page completes loading, data there when navigate original tab. has ever run issue before? ideas i'm doing wrong?
app.js
'use strict'; /** * @ngdoc overview * @name instafeed * @description * # instafeed * * main module of application. */ angular .module('instafeed', [ 'nganimate', 'ngcookies', 'ngresource', 'ngroute', 'ngsanitize', 'ngtouch' ]) .config(function ($routeprovider) { $routeprovider .when('/main', { templateurl: 'views/main.html', controller: 'showtumblr' }); });
main.js
'use strict'; angular.module('instafeed') .controller('showtumblr', function($scope){ var endpoint = 'https://api.tumblr.com/v2/user/dashboard'; oauth.initialize('[oaut.io key]'); oauth.popup('tumblr', {cache: true}).done(function(result) { result.get(endpoint).done(function(data){ $scope.posts = data.response.posts; console.log($scope.posts); }); }); });
main.html
<div class="row" ng-controller="showtumblr"> <div class="col-md-12" ng-repeat="x in posts"> <a href="{{ x.image_permalink }}" target="_blank"> <img src="{{ x.photos[0].alt_sizes[1].url }}" alt=""> </a> </div> </div>
you have use $scope.$apply() after modifying scope in async function (callbacks/promises) bind new value in view:
angular.module('instafeed') .controller('showtumblr', function($scope){ var endpoint = 'https://api.tumblr.com/v2/user/dashboard'; oauth.initialize('[oauth.io key]'); oauth.popup('tumblr', {cache: true}).done(function(result) { result.get(endpoint).done(function(data){ $scope.posts = data.response.posts; $scope.$apply(); }); }); });
take @ working exemple: http://jsfiddle.net/22spy726/2/
Comments
Post a Comment