Сортируемые вкладки на основе условия Angularjs

Question

Я работаю над вкладками в настоящее время. Мой сценарий - у меня есть вкладки, которые динамически добавляются и удаляются. На вкладках я применил директиву для перетаскивания. При нажатии на вкладку открывается текстовое поле внутри вкладки, и я могу редактировать имя вкладки. Я не хочу, чтобы вкладки перетаскивали / отбрасывали / сортировали при открытии ввода. Для этого я поддерживаю переменную IsEditable. Ниже приведен код директивы, которую я использовал из другого ответа. Хотя это работает, что он не падает, но показывает эффект движения при перетаскивании. Любая помощь будет оценена

productCatalogApp.directive('sortableTab', function ( $timeout, $document) {
    var tabs;

    return {
        require: "^ngController",
        link: function (scope, element, attrs, ngCtrl) {

            // Attempt to integrate with ngRepeat
            // https://github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js#L211
            var match = attrs.ngRepeat.match(/^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?\s*$/);

            var IsEditable = scope.isEditableTab;
            scope.$watch(match[2], function (newTabs) {
                tabs = newTabs;
            });

            scope.$watch('isEditableTab', function (newisEditableTab) {
                IsEditable = newisEditableTab;
                if (!IsEditable) {
                    attrs.$set('draggable', true);
                }
                else {
                    attrs.$set('draggable', false);
                }
            });
            var index = scope.$index;


            scope.$watch('$index', function (newIndex) {
                index = newIndex;
            });



            // Wrapped in $apply so Angular reacts to changes
            var wrappedListeners = {
                // On item being dragged
                dragstart: function (e) {

                    if (!IsEditable) {
                        e = e.originalEvent;
                        e.dataTransfer.effectAllowed = 'move';
                        e.dataTransfer.dropEffect = 'move';
                        e.dataTransfer.setData('application/json', index);
                        element.addClass('dragging');
                    }

                },
                dragend: function (e) {
                    if (!IsEditable) {
                        //e.stopPropagation();
                        e = e.originalEvent;
                        element.removeClass('dragging');
                    }
                },

                // On item being dragged over / dropped onto

                dragleave: function (e) {
                    if (!IsEditable) {
                        element.removeClass('hover');
                    }
                },
                drop: function (e, ui, scope) {
                    if (!IsEditable) {
                        e = e.originalEvent;
                        e.preventDefault();
                        e.stopPropagation();
                        var sourceIndex = e.dataTransfer.getData('application/json');
                        move(sourceIndex, index);

                        element.removeClass('hover');
                        ngCtrl.OnSort(index);
                    }

                }
            };

            // For performance purposes, do not
            // call $apply for these
            var unwrappedListeners = {
                dragover: function (e) {
                    if (!IsEditable) {
                        e.preventDefault();
                        element.addClass('hover');
                    }
                },
                /* Use .hover instead of :hover. :hover doesn't play well with 
                   moving DOM from under mouse when hovered */
                mouseenter: function () {
                    if (!IsEditable) {
                        element.addClass('hover');
                    }
                },
                mouseleave: function () {
                    if (!IsEditable) {
                        element.removeClass('hover');
                    }
                }
            };
            if (!IsEditable) {
                angular.forEach(wrappedListeners, function (listener, event) {
                    element.on(event, wrap(listener));
                });

                angular.forEach(unwrappedListeners, function (listener, event) {
                    element.on(event, listener);
                });
            }
            function wrap(fn) {

                return function (e) {
                    scope.$apply(function () {
                        if (!IsEditable) {
                            fn(e);
                        }

                    });
                };
            }

            function move(fromIndex, toIndex) {
                // http://stackru.com/a/7180095/1319998
                tabs.splice(toIndex, 0, tabs.splice(fromIndex, 1)[0]);

            }
        }
    }
});