AngularJS、SweetAlert.js 在自定义指令中不起作用

Question

我想在模式中显示列表，所以我使用指令制作了模式。

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

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

此删除按钮使用 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) {

         .....

    };

});

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

我解决了这个问题。

这个 link 帮助我找到了解决方案，这是因为 modal.html 中的 tabIndex。

去掉这个后，模态打开的sweetalert输入框就可以正常使用了llllllllllllll~!

AngularJS、SweetAlert.js 在自定义指令中不起作用

AngularJS, SweetAlert.js does not work in custom directive

jquery

angularjs

angularjs-directive

bootstrap-modal

sweetalert