Question

我正在制作一个展示慈善活动的社交Feed。它看起来像是这张图片中的第二个活动：

但正如您所看到的，每次使用angular-infinite-scroll进行下一批活动时，它都会在Feed的顶部添加一个损坏的模板。

这是为了获得更多活动而调用的函数：

feedService.prototype.nextPage = function () {
    var fs = this;

    if (fs.busy) return;
    fs.busy = true;

    fs.params.limit = fs.params.limit || _feedLimit;

    if (fs.activities.length > 0)
      fs.params.idLessThan = fs.activities[fs.activities.length - 1].id;

    $http({ url: serviceBase + 'api/stream/getflatfeed', method: 'GET', params: fs.params })
    .then(function (response) {
      var feed = response.data;
      console.dir(feed.results);
      console.dir(fs.activities);
      if (feed) {
        fs.duration = feed.duration;
        fs.gStreamMessage = feed.gStreamMessage;
        fs.unread = feed.unread;
        fs.unseen = feed.unseen;
        fs.noMoreActivity = false;
        if (response.data.results && response.data.results.length === 0)
          fs.noMoreActivity = true;
        else {
          var acts = _decorateFeedActivities(response.data.results, fs.params);
          acts.forEach(function (act) {
            var alreadyExists = false;
            fs.activities.forEach(function (e, i) {
              if (e.id === act.id) {
                console.log('alreadyExists!');
                alreadyExists = true;
              }
            });
            if (!alreadyExists) {
              fs.activities.push(act);
            }
          });
        };
      }
      fs.busy = false;
    }.bind(this));
  };

这是用于活动的指令：

feedModule.directive('feedCard', ['$compile', '$http', '$filter', function ($compile, $http, $filter) {
  var getTemplate = function (contentType) {
    var templateLoader,
    baseUrl = 'app/areas/feed/cards/',
    templateMap = {
      donated: 'general-donation-card-tpl.html',
      image: 'image-card-tpl.html',
      video: 'video-card-tpl.html',
      quote: 'quote-card-tpl.html',
      link: 'link.html',
      chat: 'chat.html',
      audio: 'audio.html',
      answer: 'answer.html'
    };
    var templateUrl = baseUrl + templateMap[contentType];
    templateLoader = $http.get(templateUrl);
    return templateLoader;
  };

  return {
    restrict: 'E',
    scope: {
      activity: '=',
      user: '='
    },
    replace: true,
    link: linker
  };

  function linker(scope, element) {
    var loader = getTemplate(scope.activity.verb);
    var promise = loader.success(function (html) {
      element.html(html);
    }).then(function (response) {
      element.replaceWith($compile(element.html())(scope));
      console.log('---------------');
    });
  }
}]);

这是无限滚动指令的HTML和以下活动：

<div class="infinite-scroll" infinite-scroll='feed.nextPage()' infinite-scroll-disabled='feed.busy || feed.noMoreActivity'>
        <feed-card class="portlet light bordered feed-card message-card" ng-repeat="activity in feed.activities" activity="activity" user="data.user"></feed-card>
        <div class="well" ng-show='feed.busy'>Loading data...</div>
        <div class="well" ng-show='feed.noMoreActivity'>There is no more activity on your feed...</div>
      </div>

我对正在发生的事情感到茫然。额外的，破坏的活动不会出现在任何API返回数组中。我会假设这可能是某种范围问题导致指令触发两次，其中一个被破坏了？

如果有人经历过这样的事情，我很乐意听取你的意见。谢谢。

Answer 1

通过添加＆＃34; ng-if =＆＃39;活动＆＃39;＆＃34;来解决此问题。到馈纸卡元素。

Angular无限滚动每次获取新数据时都会添加损坏的指令模板

1 个答案: