新しいデータを取得するたびに壊れたディレクティブテンプレートを追加する角度無限スクロール

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で、内でのアクティビティ：

私は何が起こっているのか迷っています。追加の破損したアクティビティは、APIの戻り値の配列には表示されません。私はそれが恐らく二重の発射を引き起こすスコープの問題の1つであると仮定します、それらの1つは壊れていますか？

このような経験があれば、私はあなたのアドバイスを聞いてみたいと思います。ありがとうございました。

Answer 1

「ng-if = 'activity'」をフィードカード要素に追加することでこれを修正しました。