Tumblr Feed使用AngularJS和OAuth.io

Question

我創建了一個顯示我的Tumblr儀表板的AngularJS應用程序。我遇到的問題是沒有任何數據在瀏覽器中返回。但是，如果我在頁面完成加載之前刷新頁面並立即導航到其他選項卡，那麼當我導航回原始選項卡時，數據將在那裏。有沒有人遇到過這樣的問題？任何想法我做錯了什麼？

app.js

'use strict'; 
 

 
/** 
 
* @ngdoc overview 
 
* @name instafeed 
 
* @description 
 
* # instafeed 
 
* 
 
* Main module of the 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){ 
 
\t var endpoint = 'https://api.tumblr.com/v2/user/dashboard'; 
 
\t OAuth.initialize('[oaut.io key]'); 
 
\t OAuth.popup('tumblr', {cache: true}).done(function(result) { 
 
\t \t result.get(endpoint).done(function(data){ 
 
\t \t \t $scope.posts = data.response.posts; 
 
\t \t \t console.log($scope.posts); 
 
\t \t }); 
 
\t }); 
 
});

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>

Answer 1

你必須使用$範圍$適用（）修改範圍在異步功能（回調/承諾）爲新的值在視圖中綁定後：

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(); 
     }); 
    }); 
    }); 

取看看這個工作例子：http://jsfiddle.net/22spy726/2/