My view controller includes this code snippet for fetching data from an API server:
$scope.recent_news_posts = localStorageService.get('recent_news_posts') || [];
$http({method: 'GET', url: 'http://myapi.com/posts'}).success(function(data) {
if ($scope.$$destroyed) {
return
}
$scope.recent_news_posts = data || [];
localStorageService.set("recent_news_posts", $scope.recent_news_posts);
});
In the template:
<md-card class="news-item" ng-repeat="post in recent_news_posts track by post.link" ng-click="openExternalLink(post.link);">
<md-card-title>
<md-card-title-text>
<span class="md-headline">{{ post.title }}</span>
<div class="md-subhead" ng-bind-html="post.content"></div>
</md-card-title-text>
<md-card-title-media>
<img src="{{ post.image }}" class="md-media-lg">
</md-card-title-media>
</md-card-title>
</md-card>
Sometimes, I receive Sentry reports like the following:
[ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: post in recent_news_posts track by post.link, Duplicate key: function link(), Duplicate value:
After reading an article and adding the track by directive, the issue persists. It seems that the ng-repeat function may not finish in time before new data from the server arrives. Any suggestions on how to resolve this problem?