带有Angular的JSON请求显示一个空的响应

JSON request with Angular Displays an Empty Response

本文关键字:一个 响应 Angular JSON 请求 显示 带有      更新时间:2023-09-26

我相信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。每次都有效