Javascript Can'；t使用引导在angularjs中打开模式窗口

这是我的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文件中。

您阅读了文档吗

引用模式模板时，需要使用

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

$modal.open({
模板：“模式标题…”，
windowClass:“显示”，
...

如果使用内联模板作为脚本，则需要使用正确的脚本标记声明模板。并且，不要包含外部对话框容器：

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

&时代；
模态头
模态中的一些文本

接近
$modal.open({
templateUrl:'racesInsert.html'，
windowClass:“显示”，
...

---

您没有提到正在使用哪个版本的Angular UI引导。当前版本使用

$uibModal

而不是

$modal

作为导入的模块。

以下是您需要为modal调用的js函数-

$scope.functionName=function(){
 var uibModalInstance = $uibModal.open({
        animation: true,
        templateUrl: 'html page path',
        controller: 'controllerName',
        size: 'lg',
        resolve: {
            deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                return $ocLazyLoad.load({
                    name: 'app Name',
                    insertBefore: '#ng_load_plugins_before',
                    files: ['js controller file path']
                });
            }]
        }
    });
    uibModalInstance.result.then(function (selectedItem) {
        $scope.selected = selectedItem;
    }, function () {

     });
}

当需要打开弹出窗口时，调用函数functionName

---

您需要在当前控制器中添加$uibModal作为依赖项，并且模型控制器应该将$uibModalInstance作为依赖项。

我认为您必须调用open方法..还有一个问题..为什么要在路由中声明它？。在racesController中使用decare，然后在init（）中调用它（open）可能不是更好吗你的赛车手的方法？