I have created an inventory system that displays items and allows users to click on certain items to view similar ones. However, I am facing an issue where removing the elements of similar items leaves behind some code snippets...
<!-- ngRepeat: item in category.items(3606) | orderBy:'sort_order' -->
<!-- end ngRepeat: item in category.items(3606) | orderBy:'sort_order' -->
This creates problems because whenever these items are updated elsewhere in the scope, AngularJS recreates the ng-repeat and shows it again. Am I not destroying the element correctly?
app.directive('similar', function($rootScope, $compile, $templateCache, Item, Allo){
return {
restrict: 'A',
link: function(scope, elem, attrs) {
var unqId = _.uniqueId('similar');
elem.on('click', function(){
// If the user closes the list of similar items, destroy the contents
if (elem.hasClass('glyphicon-upload')) {
elem.removeClass('glyphicon-upload');
angular.element('.'+ unqId).remove();
return;
}
elem.addClass('glyphicon-upload');
var itemId = scope.$parent.item.id;
var similars = scope.similars[itemId];
if (similars) {
var row = $templateCache.get('inventory/views/_row.htm');
var html = $compile('<tr class="'+ unqId +'" ng-repeat="item in category.items('+ similars +') | orderBy:\'sort_order\'">'+ row +'</tr>')(scope);
elem.parents('tr').after(html);
}
});
}
};
});