Question

我正在使用Bootstrap模式显示所选项目的详细信息。我有一个我想要出现的模态窗口的片段。如果我将它用作模态模板，我会遇到问题。但是，如果我将模态窗口作为普通模态触发，而不是ui.bootstrap，则一切正常。这是我的档案：

App.js

var app = angular.module('app', ['ui.router', 'ui.bootstrap']);
app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
    $urlRouterProvider.otherwise('/');

$stateProvider.state('home', {
    url: '/',
    templateUrl: 'productos/productos.html'
});
}]);

app.controller('ModalCtrl', function($scope,  $uibModal) {

      $scope.items = [{
          nombre: 'Federico Ribero',
          thumb: 'http://placehold.it/369x246',
          desc_corta: 'Esto es la decripcion corta de Fede',
          descripcion: 'Esto es la descripcion de Fede'
      },{
          nombre: 'Camila Nosotti',
          thumb: 'http://placehold.it/369x246',
          desc_corta: 'Esto es la decripcion corta de Cami',
          descripcion: 'Esto es la descripcion de Cami'
      },{
          nombre: 'Juliana Ribero',
          thumb: 'http://placehold.it/369x246',
          desc_corta: 'Esto es la decripcion corta de Juli',
          descripcion: 'Esto es la descripcion de Juli'
      }]

      $scope.showModal = function(selectedItem) {

          var uibModalInstance = $uibModal.open({
            templateUrl : 'modalContent.html',
            controller : function($scope, $uibModalInstance, $uibModal, item){
                $scope.item = item;
            },
            resolve: {
                item: function(){
                    return selectedItem;
                }
            } // empty storage
          });

          uibModalInstance.result.then(function(selectedItem){
            $scope.selected = selectedItem;
          },function(){
            //on cancel button press
            console.log("Modal Closed");
          });
      };                   
});

以模态查看

<!-- ====PROTFOLIO AREA==== -->
        <section id="Portfolio" class="protfolio_area section-padding" ng-controller="ModalCtrl">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="work_trigge">
                            <ul class="trigger mb80 text-center">
                                <li class="filter active" data-filter="">ALL</li>
                                <li class="filter" data-filter=".html">HTML</li>
                                <li class="filter" data-filter=".wordpress">Wordpress</li>
                                <li class="filter" data-filter=".ui_ux">UI/UX</li>
                                <li class="filter" data-filter=".print">PRINT</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row">
                        <div ng-repeat="item in items">
                            <!--First column-->
                            <div class="col-lg-4 col-md-12 mb-r">

                                <!--Card-->
                                <div class="card card-cascade wider">

                                    <!--Card image-->
                                    <div class="view overlay hm-white-slight">
                                        <img ng-src="{{item.thumb}}" class="img-fluid" alt="">
                                        <a>
                                            <div class="mask"></div>
                                        </a>
                                    </div>
                                    <!--/.Card image-->

                                    <!--Card content-->
                                    <div class="card-block text-xs-center">
                                        <!--Category & Title-->
                                        <a href="" class="text-muted" data-toggle="modal" data-target="#myModal"><h5>Shoes</h5></a>
                                        <h4 class="card-title"><strong><a ng-click="ModalCtrl.showModal(item)">{{item.nombre}}</a></strong></h4>

                                        <!--Description-->
                                        <p class="card-text">{{item.desc_corta}}
                                        </p>

                                        <!--Card footer-->
                                        <div class="card-footer">
                                            <span class="left"><a class="" data-toggle="tooltip" data-placement="top" title="Ver más" ng-click="showModal(item)">Ver más <i class="fa fa-eye"></i></a>
                                            </span>
                                            <span class="right">
                                            <a class="" data-toggle="tooltip" data-placement="top" title="Marcar como favorito"><i class="fa fa-heart"></i></a>
                                            </span>
                                        </div>

                                    </div>
                                    <!--/.Card content-->

                                </div>
                                <!--/.Card-->

                            </div>
                            <!--/First column-->
                    </div>                                                
                </div>
                <div class="row">
                    <div class="col-xs-12 trigger_bottom">
                        <a href="#!" class="th_bt btn waves-effect waves-light">View All
                            <i class="zmdi zmdi-long-arrow-right"></i>
                        </a> 
                    </div>
                </div>
            </div>

        </section>
        <!-- ====END PROTFOLIO AREA==== -->

由javascript触发的模式，没有样式问题

<!-- Modal -->
        <div class="modal fade ql-modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <!--Content-->
                <div class="modal-content">
                    <!--Header-->
                    <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">Vista completa del artículo</h4>
                    </div>
                    <!--Body-->
                    <div class="modal-body">
                         MY MODAL CONTENT GOES HERE.......
                    </div>
                    <!--Footer-->
                    <div class="modal-footer">
                        <a class="btn btn-default">Ask about details</a>
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!--/Modal-->

<script type="text/javascript">
$("#myModal").modal("show")
</script>

UI Bootstrap模式。

<script type="text/ng-template" id="modalContent.html">
        <!-- Modal -->
            <div class="modal-dialog" role="document">
                <!--Content-->
                <div class="modal-content">
                    <!--Header-->
                    <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">Vista completa del artículo</h4>
                    </div>
                    <!--Body-->
                    <div class="modal-body">
                        MY MODAL CONTENT GOES HERE.......
                    </div>
                    <!--Footer-->
                    <div class="modal-footer">
                        <a class="btn btn-default">Ask about details</a>
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        <!--/Modal-->
    </script>

我不知道你是否注意到原版Modal的第一行是：

<div class="modal fade ql-modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

如果我从ui.bootstrap模态删除该行，我的模态样式有问题。如果我将该行添加到ui.bootstrap模态，我的模态窗口不会出现。只是显示“面板出现”背后的阴影，但没有任何显示

我希望你能理解我的问题。非常感谢。

更新1

Answer 1

看起来你需要将你的类添加到模态的顶部窗口模板中。幸运的是，UI Bootstrap提供了windowTopClass属性，允许您将类添加到其中：

var modalInstance = $uibModal.open({
  windowTopClass: 'ql-modal',
  templateUrl : 'modalContent.html',
  controller : function($scope, $uibModalInstance, $uibModal, item){
    $scope.item = item;
  },
  resolve: {
    item: function(){
      return selectedItem;
    }
  } // empty storage
});

此外，无需包含模式对话框容器或内容容器：

<div class="modal-dialog" role="document">
  <div class="modal-content"></div>
</div>

默认情况下，这已包含在UI Bootstrap中。如果您查看库的源代码，您将看到窗口模板（https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html）已包含此容器：

<div class="modal-dialog {{size ? 'modal-' + size : ''}}"><div class="modal-content" uib-modal-transclude></div></div>

此外，如果您想对此窗口tempalte进行更改，UI Bootstrap会提供另一个属性windowTemplateUrl，您可以在其中提供自己的模板：

var modalInstance = $uibModal.open({
  windowTopClass: 'ql-modal',
  windowTemplateUrl: 'windowTemplate.html',
  templateUrl : 'modalContent.html',
  controller : function($scope, $uibModalInstance, $uibModal, item){
    $scope.item = item;
  },
  resolve: {
    item: function(){
      return selectedItem;
    }
  } // empty storage
});

具有ui.bootstrap模态的Mantain样式模态

1 个答案: