AngularJS，SweetAlert.js在自定义指令

Question

我想在模态中显示列表，所以我使用指令创建了模态。

（实际上，这些指令不是我的代码）

在列表中，每个项目都有两个按钮，一个是编辑名称，另一个是删除项目。

此删除按钮通过使用sweetalert显示确认提醒并且运行良好。

但是在显示提示警报的编辑按钮中，输入框不起作用。这似乎是残疾人。

这张照片是在指令之外打开模态的时候。输入框已经集中。

但是

这张照片是指纹内部打开的模态。输入框无法点击，如禁用时为真。

我猜这可能是因为一起使用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) {

         .....

    };

});

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

我解决了这个问题。

SweetAlert Prompt issue in bootstrap modal

此链接帮助我找到解决方案，因为benmon中有tabIndex。

删除之后，在模态中打开的sweetalert的输入框正在工作wellllllllllllllll~！