は使用して、angularjsでモーダルウィンドウを開くことができませんブートストラップ

Question

これは私のapp.jsファイルです：

const app = angular.module('CurseTransport', [ 
    'ui.router', 
    'ui.bootstrap', 
    'ngMessages', 
    'raceModule', 


]) 

app.config(['$stateProvider', '$urlRouterProvider', '$qProvider', function($stateProvider, $urlRouterProvider, $qProvider) { 
    $qProvider.errorOnUnhandledRejections(false) 
    $urlRouterProvider.otherwise('/races') 
    $stateProvider 
     .state('races', { 
      url : '/races', 
      templateUrl :'views/races.html', 
      controller:'racesController' 
     }) 
      .state('racesInsert', { 
      url: '/races/insert', 
      onEnter: ['$stateParams', '$state', '$modal', 
       function($stateParams, $state, $modal) { 
       $modal 

        // handle modal open 
        .open({ 
        template: 'views/racesInsert', 
        windowClass : 'show', 
        controller: ['$scope', 
         function($scope) { 
         // handle after clicking Cancel button 
         $scope.cancel = function() { 
          $scope.$dismiss(); 
         }; 
         // close modal after clicking OK button 
         $scope.ok = function() { 
          $scope.$close(true); 
         }; 
         } 
        ] 
        }) 

        // change route after modal result 
        .result.then(function() { 
        // change route after clicking OK button 
        $state.transitionTo('races'); 
        }, function() { 
        // change route after clicking Cancel button or clicking background 
        $state.transitionTo('races'); 
        }); 

       } 
      ] 

      }); 





}]) 

モーダルウィンドウのための私の見解：私はオープンのための私のボタンをクリックし

<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
     <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

    </div> 
</div> 

モーダルウィンドウ、それは動作していません。私は私のコンソールにエラーはありません。私は自分のスクリプトにも含まれています。

私のモーダルは、別のhtmlファイルにあります。

Answer 1

ドキュメントを読んだことがありますか？

：あなたはこのようなテンプレートをインラインで定義する場合

$modal.open({ 
    templateUrl: 'views/racesInsert.html', 
    windowClass : 'show', 
    ... 

のみtemplateを使用する：あなたは、あなたのモーダルテンプレートを参照する際templateUrl、ないtemplateを使用して、ファイル拡張子を含めるようにしてくださいする必要がありhttps://angular-ui.github.io/bootstrap/#/modal

$modal.open({ 
    template: '<div class="modal-header"><h1>Modal Heading</h1></div>...', 
    windowClass: 'show', 
    ... 

インラインテンプレートをスクリプトとして使用する場合は、適切なスクリプトタグを使用してテンプレートを宣言する必要があります。また、外側のダイアログコンテナを含めないでください：

<script id="racesInsert.html" type="text/ng-template"> 
    <!-- Modal content--> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
    </div> 
    <div class="modal-body"> 
     <p>Some text in the modal.</p> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
    </div> 
</script> 

$modal.open({ 
    templateUrl: 'racesInsert.html', 
    windowClass : 'show', 
    ... 

使用しているAngular UI Bootstrapのバージョンは言及していません。現在のバージョンでは、$uibModalではなく$modalがインポートされたモジュールとして使用されます。