AngularJS, SweetAlert.js does not work in custom directive

Question

I want to show list in a modal, so I made modal by using directives.

(Actually, these directives are not my code)

In the list, each item has two buttons, one is to edit name and the other is to delete item.

This delete button shows confirm alert by using sweetalert and works well.

But in the edit button which shows prompt alert, input box doesn't work. It seems like disabled.

This picture is when the modal opened outside of directive. Input box has focused.

But

This picture is when the modal opened inside of directive. Input box cannot clickable like when disabled true.

I guessed this were probably happened because of using JQuery and directive together,

or, somewhere has interrupted by directive source code,

however I couldn't get any ideas about this..

How can I fix this problem?

I'll wait for any useful answers from very handsome or pretty helpers :)

Here's my code

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) {

         .....

    };

});

directives.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>

Answer 1

I fixed this problem.

SweetAlert Prompt issue in bootstrap modal

This link has helped me to find solution, and it's because of tabIndex in modal.html.

After remove this, input box of sweetalert which has opened in modal works wellllllllllllllll~!