使用 AngularJS 和 OAuth.io 的 Tumblr 提要答案

【问题标题】：Tumblr Feed using AngularJS and OAuth.io使用 AngularJS 和 OAuth.io 的 Tumblr 提要
【发布时间】：2015-08-13 23:07:04
【问题描述】：

我创建了一个 AngularJS 应用程序来显示我的 Tumblr 仪表板。我遇到的问题是浏览器中没有返回任何数据。但是，如果我在页面完成加载之前刷新页面并立即导航到不同的选项卡，则当我导航回原始选项卡时数据将在那里。有没有人遇到过这样的问题？任何想法我做错了什么？

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){
	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>

【问题讨论】：

当您说there is not any data being returned in the browser 时，您的意思是页面上没有显示任何内容，对吧？
@Rebornix 没错。页面上没有显示任何内容。我只有在刷新时才能看到内容，在页面完成加载之前转到另一个选项卡，然后在完成加载后返回选项卡。

标签： angularjs oauth tumblr oauth.io

【解决方案1】：

您必须在修改异步函数（回调/承诺）中的范围后使用 $scope.$apply() 来绑定视图中的新值：

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/

【讨论】：