Почему макет не работает в модальном диалоге в Angular 1? - PullRequest
Новая
       12

Почему макет не работает в модальном диалоге в Angular 1?

0 голосов
/ 28 апреля 2018

Я пытаюсь создать простое диалоговое окно с содержимым в табличной форме:

  • строка 1
    • Столбец 1: эта ячейка должна содержать текст .col-md-4
    • Колонка 2: .col-md-4 .ml-auto
  • строка 2
    • Столбец 1: .col-md-3 .ml-auto
    • Колонка 2: .col-md-2 .ml-auto

Я написал следующий код для этого: 

<!doctype html>
<html lang="en" ng-app="app" ng-controller="myCtrl">
  <head>
    <meta charset="utf-8">
    <title>My HTML File</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap-tpls.js"></script>

    <script src="app.js"></script>
  </head>
  <body>
    <button ng-click="buttonClicked()">Show Modal Dialog</button>
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-dialog" role="document">
         <div class="modal-content"> 
            <div class="modal-header">
                <h3 class="modal-title" id="modal-title">My title</h3>
            </div>
            <div class="modal-body" id="modal-body">
                <div class="container-fluid">
                    <div class="row">
                      <div class="col-md-4">.col-md-4</div>
                      <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
                    </div>
                    <div class="row">
                      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
                      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
                    </div>
                </div> <!-- container-fluid -->

            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
                <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
            </div>
            </div> <!-- modal-content -->
        </div> <!-- modal-dialog -->
    </script>
  </body>
</html>

Соответствующий файл app.js выглядит следующим образом: 

'use strict';

var app = angular.module('app', ['ui.bootstrap']);


app.controller('myCtrl', function($scope, $uibModal) {
    console.log("Init");
    $scope.buttonClicked = function() {
        console.log("Button clicked");
        var modalInstance = $uibModal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            controllerAs: '$ctrl'
        });
    };

});

app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance) {
    var $ctrl = this;
    $ctrl.ok = function () {
        console.log("Closing with OK");
        $uibModalInstance.close();
    };

    $ctrl.cancel = function () {
        console.log("Closing with Cancel");
        $uibModalInstance.dismiss('cancel');
    };
});

Когда я

  • пробег npm start,
  • откройте ссылку http://localhost:8000 и
  • нажмите кнопку Show Modal Dialog,

Я вижу каждую ячейку подряд (т.е. нет табличной структуры):

Screenshot

Документы по начальной загрузке (раздел Использование сетки ) говорят, что это должно работать, но это не так.

Почему? Как я могу это исправить?

1 Ответ

0 голосов
/ 28 апреля 2018

Это должно быть связано с responsive-breakpoints, который вы используете. Когда не хватает места для начальной загрузки, просто сделайте это. Вместо этого используйте xs, это должно решить проблему (col-xs-4).

хз -> очень маленькие устройства

см -> маленькие устройства

md -> средние устройства

lg -> большие устройства

xl -> очень большие устройства 

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4">.col-xs-4</div>
    <div class="col-xs-4 ml-auto">.col-xs-4 .ml-auto</div>
  <div class="row">
    <div class="col-xs-3 ml-auto">.col-xs-3 .ml-auto</div>
    <div class="col-xs-2 ml-auto">.col-xs-2 .ml-auto</div>
  </div>
</div> <!-- container-fluid -->
...