黑客新闻api + angular.js问题加载某些故事类型

时间:2015-05-27 12:32:51

标签: javascript angularjs firebase

我正在使用官方黑客新闻firebase api和angular.js构建黑客新闻客户端。我在加载“职位故事”帖子时遇到了问题。故事的ID记录在控制台中,但屏幕上没有任何内容呈现。我的代码在获取'topstories','maxitem'和'showstories'时起作用,尽管如此我还是很困惑。这是指向plunker的链接。

angular.module('app.services', ['ngColorThis', 'ngTouch']).factory('HackerNews', function() {
return new Firebase('https://hacker-news.firebaseio.com/v0');});

angular.module('app.controllers', ['app.services']).controller('AppController', [
'$scope', '$sce', '$timeout', '$window', '$q', 'HackerNews', function($scope, $sce, $timeout, $window, $q, HackerNews) {
$scope.section = 'top';
$scope.gotoStory = function(story) {
  $scope.currentStory = story;
  $scope.storyUrl = $sce.trustAsResourceUrl(story.url);
  return $scope.navi.pushPage(cordova.ThemeableBrowser.open(story.url, '_blank', {toolbar: {
    height: 44,
    color: 'transparent'
}, closeButton: {
    image: 'ic_cancel_black',
    imagePressed: 'close_pressed',
    align: 'left',
    event: 'closePressed'
}}));
};
$scope.loadUrl = function(url) {
  return $window.open(url, '_blank', 'location=yes');
};
return $scope.getStory = function(id) {
  var deferred, timer;
  deferred = $q.defer();
  timer = $timeout(deferred.resolve, 1000);
  HackerNews.child("item/" + id).once('value', function(data) {
    var item;
    item = data.val();
    if (item && item.type === 'story' && !item.deleted && item.url) {
      $timeout.cancel(timer);
      return deferred.resolve(item);
    } else {
      $timeout.cancel(timer);
      return deferred.resolve();
    }
  });
  return deferred.promise;
};
}
]).controller('JobController', [
'$scope', '$q', 'HackerNews', function($scope, $q, HackerNews) {
$scope.stories = [];
$scope.getJobStories = function() {
  return HackerNews.child('jobstories').once('value', function(data) {
    var i, id, jobId, len, promises;
    console.log(data.val());
    jobId = data.val();
    promises = []; 
    for (i = 0, len = jobId.length; i < len; i++) {
      id = jobId[i];
      promises.push($scope.getStory(id));
    }
    return $q.all(promises).then(function(stories) {
      stories = stories.filter(function(story) {
        return typeof story !== 'undefined';
      });
      if (stories.length > 0) {
        return $scope.stories = stories;
      }
    });
  });
};
return HackerNews.child('jobstories').on('value',   $scope.getJobStories);
}
]);

      <ons-template id="jobs.html">
        <ons-navigator var="navi">
            <ons-list  ng-controller="JobController">            
              <ons-list-item  modifier="tappable" ng-repeat="story in stories" ng-click="gotoStory(story); showme=true;">   
                <div ng-hide="showme">  
                  <div style="padding: 0 10px 0 10px;">   
                    <span color-this="color" data-color="story.title" class="story-title">{{ story.title }}</span>           
                    <span color-this="color" data-color="story" class="story-site">({{ story.url | urlToHost }})</span>            
                    <span style="display:inline" class="story-info">{{ story.score }} points by</span><span style="display:inline" color-this="color" data-color="story.title" class="story-info"> {{ story.by }} </span><span style="display:inline" class="story-info">{{ story.time | timeAgo }}</span>           
                  </div>           
                </div>           
                <div ng-show="showme" style="opacity:0.4" color-this="background" data-color="story.title">                      
                  <div style="padding: 0 10px 0 10px;">            
                    <span class="story-title">{{ story.title }}</span>             
                    <span color-this="color" data-color="story" class="story-site">({{ story.url | urlToHost }})</span>              
                    <span class="story-info">{{ story.score }} points by {{ story.by }} {{ story.time | timeAgo }}</span>            
                  </div>
                </div>
              </ons-list-item>
           </ons-navigator>
         </ons-template>

1 个答案:

答案 0 :(得分:0)

好的,我已经弄清楚出了什么问题。我有一行if (item && item.type === 'story' && !item. DELETED&& item.url),其中我将结果限制为类型&#34;故事的项目。&#34;职位帖实际上有一个等于&#34;工作&#34;所以这些帖子不被允许。我删除了指定项目类型的条件,并且能够将作业帖子呈现给屏幕。