Question

我制作了一个列出项目的清单，一些项目允许您点击它们以查看类似的项目。当我在用户关闭它们的列表后删除类似的项目元素时，它会留下......

<!-- ngRepeat: item in category.items(3606) | orderBy:'sort_order' -->
<!-- end ngRepeat: item in category.items(3606) | orderBy:'sort_order' -->

会导致问题，因为每当更新这些项目时，其他位置在范围内，angular会重新创建ng-repeat并显示它。我在摧毁这个元素错了吗？

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 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);
                }
            });
        }
    };
});

Answer 1

首先，在指令中通常不需要这种DOM操作。你最有可能通过以下方式实现你想要的目标：

<table similar ng-hide="similar_items.length == 0">
  <tr ng-repeat="item in similar_items" ...>
   <!-- contents of inventory/views/_row.htm here -->      
  </tr>
</table>

table将被隐藏，当<tr>同样为空时，similar_items的空集合为空，那么您需要在您的范围内设置：{/ p >

elem.on('click', function() {
   ...
   var itemId = scope.$parent.item.id;
   var similars = scope.similars[itemId];   
   scope.similar_items = category.items(similars);
});

您根本不需要手动操作DOM - angular将绑定到范围中的similar_items属性，并在您的<tr>中执行正确的操作。您可以通过类似的机制添加/删除glyphicon-upload类，尽管隐藏元素上的类的用途是作为练习保留的：）

可以修复你的留守评论问题;我在不同的情况下遇到了同样的问题（在动画完成后修改了范围的模型），但还没有解决它。

删除元素会留下ng-repeat注释

1 个答案:

删除元素会留下ng-repeat注​​释

1 个答案:

删除元素会留下ng-repeat注释