带有Angular的JSON请求显示一个空的响应
JSON request with Angular Displays an Empty Response
我相信Angular在从JSONP接收到所有信息之前就加载了页面。如果我刷新页面几次,我确实得到了要显示的信息;然而,它不是恒定的。我的代码几乎与我在项目页面上使用的代码相同,没有相同的问题。
HTML:<div class="container">
<div class="row push-top" ng-show="user">
<div class="col-xs-10 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1">
<div class="well well-sm">
<div class="row">
<div class="col-sm-3 col-md-2">
<img ng-src="[[ user.images.138 ]]" alt="" class="img-rounded img-responsive" />
</div>
<div class="col-sm-7 col-md-8">
<h4 ng-bind="user.display_name"></h4>
<h5 ng-bind="user.occupation"></h5>
<i class="fa fa-map-marker"></i>
<cite title="[[ user.city ]], [[ user.country ]]">[[ user.city ]], [[ user.country ]]</cite>
<br>
<strong ng-bind="user.stats.followers"></strong> Followers, <strong ng-bind="user.stats.following"></strong> Following
<hr>
<p style="margin-top:10px;" ng-bind="user.sections['About Me']"></p>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScipt:
'use strict';
angular.module('angularApp')
.controller('AboutCtrl', function ($scope, $window, Behance) {
$scope.loading = true;
Behance.getUser('zachjanice').then(function (user) {
$scope.user = user;
$scope.loading = false;
}, function (error) {
console.log(error);
$scope.loading = false;
$scope.user = null;
});
$scope.gotoUrl = function (url) {
$window.location.href = url;
};
});
您可以在:http://zachjanice.com/index.html#/about上看到有问题的页面。提前感谢。
按要求这里是性能服务:
'use strict';
angular.module('angularApp')
.factory('Behance', function ($http, $q, localStorageService, BEHANCE_CLIENT_ID) {
// Should be called to refresh data (for testing purposes)
// localStorageService.clearAll();
// Public API
return {
// Get a list of projects
getProjects: function (config) {
var pageNum = 1;
if (angular.isObject(config) && angular.isDefined(config.page)) {
pageNum = config.page;
}
var _projects = $q.defer(),
_storedProjects = localStorageService.get('Projects_Page_');
if (_storedProjects !== null) {
_projects.resolve(_storedProjects);
} else {
$http.jsonp('https://www.behance.net/v2/users/zachjanice/projects', {
params: {
'client_id': BEHANCE_CLIENT_ID,
'callback': 'JSON_CALLBACK',
'page': pageNum
}
})
.then(function (response) {
if (response.data.http_code === 200 && response.data.projects.length > 0) {
// console.log('getting page', _page);
_projects.resolve(response.data.projects);
localStorageService.add('Projects_Page_' + pageNum, response.data.projects);
}
});
}
return _projects.promise;
},
// Get project with id
getProject: function (id) {
var _project = $q.defer();
$http.jsonp('https://www.behance.net/v2/projects/' + id, {
params: {
'client_id': BEHANCE_CLIENT_ID,
'callback': 'JSON_CALLBACK'
},
cache: true
}).success(function (data){
_project.resolve(data.project);
});
return _project.promise;
},
// Get project with id
getUser: function (username) {
var _user = $q.defer();
$http.jsonp('https://www.behance.net/v2/users/' + username, {
params: {
'client_id': BEHANCE_CLIENT_ID,
'callback': 'JSON_CALLBACK'
},
cache: true
}).success(function (data){
_user.resolve(data.user);
});
return _user.promise;
}
};
});
Anthony Chu没有提供任何支持,所以我自己找到了答案。问题不在于Behance Service,而在于我最初所说的Projects Controller。
我更改了$scope。在服务调用下从false加载到true。每次都有效
相关文章:
- 有一个响应式按钮
- 必须单击两次才能得到一个响应
- 具有一个响应的多个回调-Node JS
- 通过管道将多个文件传送到一个响应
- 如何创建一个响应单击或输入按下的 javascript 函数
- XMLHttpRequest分块响应,只读取正在进行的最后一个响应
- 我如何引用并返回一个响应,基于一个单选按钮的答案,该单选按钮包含在另一个单选键中
- AJAX——可以在请求响应上标记到前一个响应的末尾
- 在expressjs中,从函数向路由发送一个响应
- 如何用react构建一个响应式网站
- 如何设置一个响应chart.js图表不填满屏幕
- 如何在html css和jquery上创建一个响应式菜单,逐个隐藏li元素
- 我如何使一个响应图像地图,其中图像和热点自动调整大小与窗口
- 创建一个响应式html表
- 如何使用fancybox创建一个响应式弹出框
- 寻找一个响应式javascript图表库
- 创建一个响应式容器
- 如何解析json中的一个响应
- 做一个响应式的Javascript水平导航,中间有Logo
- 卓别林是一个响应路由的永久控制器