删除特定元素AngularJS的指令

Question

我在AngularJS中实现了拖放功能。一旦我放下一个项目＆＃34;我＆＃34;在bin＆＃34; b＆＃34;，我想要那个＆＃34;我＆＃34;应该变成不可拖动的＆＃34; b＆＃34;应该变得不可褪色。

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字段创建可拖动和可放置项目:(由于复杂性，此处限制了代码段）

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

我需要删除＆＃34; droppable＆＃34;从这个bin＆＃34; b＆＃34;，或者至少在我删除一些项目后禁用它＆＃34; i＆＃34;在这个箱子上＆＃34; b＆＃34;。同样适用于＆＃34; draggable＆＃34;。

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

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

在我对这些元素使用这些指令后，如何禁用/删除某些元素的指令？