无法使用Bootstrap在angularjs中打开模式窗口 [英] Can't open a modal window in angularjs, using bootstrap

问题描述

这是我的app.js文件:

This is my app.js file:

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>

当我单击我的按钮以打开模式窗口时，它不起作用.我的控制台没有错误.我也将其包含在脚本中.

When i click my button for open the modal window, it is not working. I have no error in my console. I also included in my scripts.

我的模态位于另一个html文件中.

My modal is located in a different html file.

推荐答案

您已阅读文档吗? https://angular-ui.github.io/bootstrap/#/modal

在引用模态模板时，您需要使用templateUrl，而不是template，并确保包含文件扩展名:

You need to use templateUrl, not template when referencing your modal template, and be sure to include the file extension:

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

如果要像这样定义内联模板，请仅使用template:

Only use template if you are defining the template inline like this:

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

如果将嵌入式模板用作脚本，则需要使用适当的script标记声明模板.并且，不要包括外部对话框容器:

If you are using an inline template as a script, you need to declare the template with a proper script tag. And, do NOT include the outer dialog container:

<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作为导入的模块.

You did not mention which version of Angular UI Bootstrap you are using. The current version uses $uibModal not $modal as the imported module.

这篇关于无法使用Bootstrap在angularjs中打开模式窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！