Я хочу показать список в модальном режиме, поэтому я сделал его модальным с помощью директив.

(На самом деле эти директивы не мой код)

В списке у каждого элемента есть две кнопки, одна для редактирования имени, а другая для удаления элемента.

Эта кнопка удаления показывает предупреждение о подтверждении с помощью sweetalert и работает хорошо.

Но в кнопке редактирования, которая показывает быстрое предупреждение, поле ввода не работает. Вроде как инвалид.

Это изображение, когда модальное окно открывается за пределами директивы. Поле ввода сфокусировано.

Но

Это изображение, когда модальное окно открывается внутри директивы. Поле ввода не может быть кликабельным, например, когда отключено true.

Я предположил, что это, вероятно, произошло из-за совместного использования JQuery и директивы,

или, где-то прервал исходный код директивы,

однако я не мог получить никаких идей по этому поводу ..

Как я могу решить эту проблему?

Буду ждать полезных ответов от очень красивых или симпатичных помощников :)

Вот мой код

index.html

<button class="btn btn-primary" ng-click="showModal()">Open Modal</button>
<modal visible="showModal" backdrop="static">
    <modal-header title="Modal Title"></modal-header>
    <modal-body class="modal-table-body">
        <ul class="modal-list-group">
            <li ng-repeat="catInfo in catInfos class="modal-list-li">
                <div class="modal-list-li-txt">
                    {{catInfo.cat_name}}
                </div>
                <button class="btn btn-danger modal-btn" ng-click="delCat(catInfo)"></button>
                <button class="btn btn-info modal-btn" ng-click="editCat(catInfo)"></button>
            </li>
        </ul>    
    </modal-body>
    <modal-footer>
        <button class="btn btn-primary" ng-click="hideModal()">Close Modal</button>
    </modal-footer>
</modal>

indexCtrl.js

app.controller('IndexCtrl', function ($scope, $state, $http, Define, HttpService) {

    //    to get catInfos
    HttpService.getList(Define.GET, Define.CAT_URL)
    .then(function (success) {
        $scope.catInfos = success;
    }, function (error) {

    });

    $scope.showModal = function () {
        $scope.showModal = true;
    };
    $scope.hideModal = function () {
        $scope.showModal = false;
    };

    $scope.editCat = function (info) {

        swal({
            title: 'Edit Category',
            text: 'Category name will be replaced with your text',
            type: 'input',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes',
            cancelButtonText: 'No',
            closeOnConfirm: false,
            showLoaderOnConfirm: true,
            animation: "slide-from-top",
            inputPlaceholder: "Write something"
        }, function (inputValue) {
            if (inputValue === false) return false;
            if (inputValue === "") {
                swal.showInputError("You need to write something!");
                return false
            }
        });
    };

    $scope.delCat = function (info) {

         .....

    };

});

директивы.js

app.directive('modal', function(){
    return {
        templateUrl: 'modal.html',
        restrict: 'E',
        transclude: true,
        replace:true,
        scope:{visible:'=', onSown:'&', onHide:'&'},
        link:function postLink(scope, element, attrs){

            $(element).modal({
                show: false,
                keyboard: attrs.keyboard,
                backdrop: attrs.backdrop
            });

            scope.$watch(function(){return scope.visible;}, function(value){

                if(value == true){
                    $(element).modal('show');
                }else{
                    $(element).modal('hide');
                }
            });

            $(element).on('shown.bs.modal', function(){
                scope.$apply(function(){
                    scope.$parent[attrs.visible] = true;
                });
            });

            $(element).on('shown.bs.modal', function(){
                scope.$apply(function(){
                    scope.onSown({});
                });
            });

            $(element).on('hidden.bs.modal', function(){
                scope.$apply(function(){
                    scope.$parent[attrs.visible] = false;
                });
            });

            $(element).on('hidden.bs.modal', function(){
                scope.$apply(function(){
                    scope.onHide({});
                });
            });
        }
    };
})
.directive('modalHeader', function(){
    return {
        templateUrl: 'modalHeader.html',
        replace:true,
        restrict: 'E'
    };
})
.directive('modalBody', function(){
    return {
        templateUrl: 'modalBody.html',
        replace:true,
        restrict: 'E',
        transclude: true
    };
})
.directive('modalFooter', function(){
    return {
        templateUrl: 'modalFooter.html',
        replace:true,
        restrict: 'E',
        transclude: true
    };
});

modal.html

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content" ng-transclude>
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
        </div>
    </div>
</div>

modalHeader.html

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">{{modalTitle}}</h4>
</div>

modalBody.html

<div class="modal-body" ng-transclude></div>

modalFooter.html

<div class="modal-footer" ng-transclude></div>