角度加载更多推文onclick

时间:2015-06-08 14:39:29

标签: javascript angularjs rest scope resources

Angular相当新,并建立一个Twitter流,在点击事件中加载缓存的推文。我看到的问题是在点击加载按钮之前加载了推文。对我不理解的推文范围有约束力。以下是相关代码:

HTML:

      <button ng-if="moreTweets" ng-click="loadMoreTweets()">Load More Tweets</button>
      <div  ng-repeat="tweet in tweets" class="tweetContainer" ng-bind-html="tweet" ></div>

工厂:

    angular.module('TweetService', ['ngResource'])
     .factory('TweetData', function ($resource) {
       return $resource('/2/messages', {}, {
        query: { method: 'GET', isArray: false }    
       })
     })

控制器:

  .controller('MainCtrl', function ($scope, $timeout,TweetData) {
    $scope.tweets = [];
    var allTweets = [];        
    (function tick() {
       TweetData.get({payload: $scope.payload},function(data){
              tweethandler(data)
              $timeout(tick, 5000);
        })
    })();

    $scope.loadMoreTweets = function(){
      $scope.moreTweets = false;
      $scope.tweets = allTweets;
    }


    var tweethandler = function(body){
      var tweets = messages.map(function(body.messages) { return encodeTweet(body.messages.tweet); });
      if (tweets.length>0){
           $scope.moreTweets = true;
           Array.prototype.unshift.apply(allTweets, tweets);
           $scope.payload = body.next_request;
      } 
    }
  }

加载更多推文按钮显示初始加载。之后,每当更新allTweets时,$ scope.tweets也会在单击按钮之前更新。

2 个答案:

答案 0 :(得分:1)

这是预期的行为。您将$ scope.allTweets分配给$ scope.tweets,从而创建对该数组的引用。这意味着当对$ scope.allTweets或$ scope.tweets进行更改时,将对这两个变量指向的同一对象进行更改。

如果你想要allTweets的一个子集,你应该推送或创建一个新的数组

答案 1 :(得分:0)

感谢Eylen,我现在明白了这个行为。

重置数组后将分配更改为推送:

在loadMoreTweets中

   $scope.tweets = [];  
   Array.prototype.push.apply($scope.tweets, allTweets);