Javascript 特定元素AngularJS的Remove指令

我在AngularJS中实现了拖放功能。一旦我把一个项目“I”放在箱子“b”上，我希望“I”变成不可拖拽的，“b”变成不可拖拽的

App.js代码段：

app.directive('draggable', function () {
    return function (scope, element) {
        var el = element[0];
        el.draggable = true;
        el.addEventListener('dragstart', function (e) {
            e.dataTransfer.effectAllowed = 'copy';
            e.dataTransfer.setData('Text', this.id);
            this.classList.add('drag');
            return false;
        }, false);
        el.addEventListener('dragend', function (e) {
            this.classList.remove('drag');
            return false;
        }, false);
    };
});
app.directive('droppable', function () {
    return {
        scope: {
            drop: '&',
            bin: '='
        },
        link: function (scope, element) {
            var el = element[0];
            el.addEventListener('dragover', function (e) {
                e.dataTransfer.dropEffect = 'copy';
                if (e.preventDefault)
                    e.preventDefault();
                this.classList.add('over');
                return false;
            }, false);
            el.addEventListener('dragenter', function (e) {
                this.classList.add('over');
                return false;
            }, false);
            el.addEventListener('dragleave', function (e) {
                this.classList.remove('over');
                return false;
            }, false);
            el.addEventListener('drop', function (e) {
                if (e.stopPropagation)
                    e.stopPropagation();
                this.classList.remove('over');
                var binId = this.id;
                var item = document.getElementById(e.dataTransfer.getData('Text'));
                this.appendChild(document.createTextNode(" -- " + item.innerHTML));
                //this.appendChild(item);
                scope.$apply(function (scope) {
                    var fn = scope.drop();
                    if ('undefined' !== typeof fn) {
                        fn(item.id, binId);
                    }
                });
                return false;
            }, false);
        }
    };
});

我使用从服务器接收的ng repeat on字段创建了可拖动和可拖放的项，如下所示：（由于复杂性，这里的代码片段有限）

{{element.name}

我需要从这个箱子“b”中删除“Dropable”，或者至少在我把一些物品“I”放到这个箱子“b”中后禁用它。“可拖动”也是如此

{{field}

两者中的元素数量都可能非常大，因此我无法使用ngIf提出解决方案

在我对某些元素使用了这些指令之后，有没有关于如何禁用/删除这些元素的指令的线索

<button class="btn btn-danger elements bin" droppable drop="handleDrop" id="{{element.name}}">{{ element.name }}</button>

<th ng-repeat="field in tab.excelFields" class="btn btn-danger item" draggable style="display:table-cell;" id="{{field}}" value="{{field}}">{{field}}</th>