AngularJS、SweetAlert.jsがカスタムディレクティブで機能しない

Question

リストをモーダルで表示したいので、ディレクティブを使用してモーダルを作成しました。

リストで

（実際には、これらのディレクティブは私のコードではありません）、各項目が2つのボタンがあり、一つは名前を編集することで、その他の項目を削除することです。

この削除ボタンは、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) { 

     ..... 

    }; 

}); 

だ非常にハンサムやきれいなヘルパーからの任意の有用な答え:)

のために待っています

指示文.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

このリンクは解決策を見つけるために私を助けている、それが理由modal.htmlでtabIndexのです。

これを削除した後、モーダルで開いたsweetalertの入力ボックスは、wellllllllllll！