Угловая бесконечная прокрутка, добавляющая сломанные шаблоны директив каждый раз, когда она получает новые данные

Question

Я работаю над социальным фидом, который отображает благотворительную деятельность. Это должно выглядеть как вторая активность на этом изображении:

Но как вы можете видеть, каждый раз, когда угловая бесконечная прокрутка идет, чтобы принести следующую партию деятельности, он добавляет сломанный шаблон верхняя часть корма.

Это функция, которая называется, чтобы получить больше видов деятельности:

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

Исправлено это путем добавления «ng-if = 'activity» к элементу фида.