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

我解决了这个问题。

SweetAlert Prompt issue in bootstrap modal

此链接帮助我找到解决方法，这是因为在tabIndexmodal.html。

删除此之后，在模态中打开的sweetalert的输入框会起作用welllllllllllllllll〜！