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

Posted 2023-05-09

【中文标题】AngularJS、SweetAlert.js 在自定义指令中不起作用

【英文标题】：AngularJS, SweetAlert.js does not work in custom directive

【发布时间】：2018-02-06 10:14:55

【问题描述】：

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

（其实这些指令不是我的代码）

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

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

【问题讨论】：

你能发布一个工作的plunker

真的很抱歉，但是我试图删除我的重要来源并复制到 plunker 并没有成功..因为我的编码能力不好

【参考方案1】：

我解决了这个问题。

SweetAlert Prompt issue in bootstrap modal

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

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