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)

这似乎来自ngRepeatDirective的watchCollection。

我觉得我错过了一些基本的东西，但却看不到现在的东西，所以，在这里我先讨论一下挖掘角度代码。

提前谢谢。

修改

添加了一份工作样本： http://codepen.io/sergio0983/pen/rMEMoJ?editors=1010

编辑2

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

Answer 1

将addPicture()函数添加到 mainController （这将在图片对象中添加常量唯一ID）：

.controller("mainController", function($scope){
  $scope.article = {pictures:[]};
  $scope.addPicture = function addPicture (picture) {
    // set unique ID
    picture.id = $scope.article.pictures.length;
    $scope.article.pictures.push(picture);
  };
})

将添加按钮HTML更改为：

<div class='md-button l3' ng-click='addPicture(picture)'>Add</div>

将 galleryManager 的模板更改为track by picture.id：

<div gallery-item='picture' 
     ng-repeat='picture in galleryManagerCtrl.pictures track by picture.id'></div>

修改removeItemAt()函数，（此处不需要$compile）：

self.removeItemAt = function removeItemAt (id) {
  // find index for the picture with given id
  id = self.pictures.findIndex((item) => item.id === id);
  self.pictures.splice(id, 1);
}

修改后的代码：http://codepen.io/anon/pen/mrZOre?editors=1010

从父指令

1 个答案: