無法打開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

您是否閱讀過文檔？ https://angular-ui.github.io/bootstrap/#/modal

您需要參考您的模態模板時使用templateUrl，不template，並且一定要包括文件擴展名：

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

僅如果要定義這樣的模板內聯使用template：

$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', 
    ... 

你沒有提到你正在使用的角度UI引導的版本。當前版本使用$uibModal而不是$modal作爲導入的模塊。