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〜！