从父指令中删除子指令时发生的ngRepeat错误

Question

我有一些问题的画廊管理组件，您可以添加/删除图片。

这是库处理程序的html代码：

<img src = '{{snapshot}}' >
<div class = 'md-button l3' is-file ng-model = 'picture' blob-url = 'snapshot'>Upload</div>
<div class = 'md-button l3' ng-click = 'article.pictures.push(picture)'>Add</div>   

<div gallery-manager = 'article.pictures'></div>

以下是指令：

.directive("galleryManager", function($compile){
        var controllerFn = function($scope, $element, $attrs){
            var self = this;        
            self.removeItemAt = function($index){
                self.pictures.splice($index, 1);
                $compile($element)($scope); <--Note this
            }
        }
        var linkFn = function($scope, $element, $attrs){
        }

        return {
            template:"<div gallery-item = 'picture' ng-repeat = 'picture in galleryManagerCtrl.pictures track by $index'></div>",
            restrict:"A",   
            controller:controllerFn,
            controllerAs:"galleryManagerCtrl",
            bindToController:{
                pictures:"=galleryManager",
            }
        }
    })
    .directive("galleryItem", function(FileService){
        var linkFn = function($scope, $element, $attrs, galleryManagerCtrl){
            $scope.galleryItemCtrl.galleryManagerCtrl = galleryManagerCtrl;
        }
        var controllerFn = function($scope, $element, $attrs){
            var self = this;
            if ( self.item instanceof File ){
                FileService.buildBlobUrl(self.item).then(function(blobUrl){
                    self.thumb = blobUrl;
                })
            }
        }
        return{
            template:"<img src = '{{galleryItemCtrl.thumb}}'>"+
                "<a class = 'delete' ng-click = 'galleryItemCtrl.galleryManagerCtrl.removeItemAt($index)'>&times</span></a>",
            restrict:"A",
            require:"^galleryManager",
            link:linkFn,
            controller:controllerFn,
            bindToController:{
                item:"=galleryItem",
            },
            controllerAs:"galleryItemCtrl"
        }
    })

现在，该指令在添加元素时运行良好，但在删除项时会出现问题；在使用：$compile($element)($scope)之前，删除后的图片库中的最后一项总是会被删除，尽管图片数组删除了正确的项，所以我在删除项后添加了$compile行。

问题是，尽管库现在做了我想做的事情，但是它在编译后一直抛出一个错误(发布完整的跟踪，也许它可以帮助某人)：

angular.js:13920 TypeError: Cannot read property 'insertBefore' of null
    at after (http://localhost/www/project/admin/bower_components/angular/angular.js:3644:13)
    at JQLite.(anonymous function) [as after] (http://localhost/www/project/admin/bower_components/angular/angular.js:3728:17)
    at domInsert (http://localhost/www/project/admin/bower_components/angular/angular.js:5282:35)
    at Object.move (http://localhost/www/project/admin/bower_components/angular/angular.js:5488:9)
    at ngRepeatAction (http://localhost/www/project/admin/bower_components/angular/angular.js:29865:26)
    at $watchCollectionAction (http://localhost/www/project/admin/bower_components/angular/angular.js:17385:13)
    at Scope.$digest (http://localhost/www/project/admin/bower_components/angular/angular.js:17524:23)
    at ChildScope.$apply (http://localhost/www/project/admin/bower_components/angular/angular.js:17790:24)
    at HTMLAnchorElement.<anonymous> (http://localhost/www/project/admin/bower_components/angular/angular.js:25890:23)
    at defaultHandlerWrapper (http://localhost/www/project/admin/bower_components/angular/angular.js:3497:11)

这似乎来自watchCollection at ngRepeatDirective。

我有一种感觉，我错过了一些基本的东西，但无法看到什么是现在，所以，这里，我来问一下，然后再深入研究角度代码。

提前谢谢你。

编辑

添加了一个工作示例：http://codepen.io/sergio0983/pen/rMEMoJ?editors=1010

编辑2

将$compile从工作样本中删除，它可以工作，是的，但会抛出错误；此外，我认为真正的问题在其他地方。在工作示例中，可以看到删除项时文件名是如何更新的，但是图片保持了原来的顺序。

Answer 1

1. 将addPicture()函数添加到mainController中(这将在图片对象中添加常量唯一ID )： .controller("mainController"，函数($scope){ $scope.article ={$scope.article：[] }；$scope.addPicture =函数addPicture (图片){ //设置唯一ID picture.id = $scope.article.pictures.length；$scope.article.pictures.push(图片)；}；})
2. 将添加按钮HTML更改为：
3. 将galleryManager模板更改为track by picture.id
4. 修改removeItemAt()函数，(此处不需要$compile)： self.removeItemAt =函数removeItemAt ( id ) { //查找具有给定id = self.pictures.findIndex((item) => item.id === id)的图片的索引；self.pictures.splice(id，1)；} 改进型代码：http://codepen.io/anon/pen/mrZOre?editors=1010