Question

这是html文档代码。

    <html>
    <head>
    <link rel="stylesheet" href="bower_components/bootstrap/css/bootstrap.css">
    <script src="bower_components/jquery/jquery.js" type="text/javascript"></script>
    <script src="bower_components/angular/angular.js" type="text/javascript"></script>
    <script src="bower_components/bootstrap/bootstrap.js" type="text/javascript"></script>
    <script src="bower_components/bootstrap/ui-bootstrap-tpls-0.11.2.min.js"type="text/javascript"></script>
    </head>
    <body ng-app="cloudPayrollEssApp">
     <div ng-controller="CloudCtrl">
 <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a ng-click="selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>
    <button class= 'btn btn-primary' ng-click="open()">Button</button>
    </div>
    </body>
    </html>

控制器代码如下：我从http://angular-ui.github.io/bootstrap/获取此示例我想包括所有必需的东西。

    var app = angular.module('cloudPayrollEssApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ui.bootstrap'
  ])
  app.controller("CloudCtrl", function($scope,  $modal, $log){
    $scope.tab = 0;  
     $scope.items = ['item1', 'item2', 'item3'];

      $scope.open = function (size) {

        var modalInstance = $modal.open({
          templateUrl: 'myModalContent.html',
          controller: 'ModalInstanceCtrl',
          size: size,
          resolve: {
            items: function () {
              return $scope.items;
            }
          }
        });

        modalInstance.result.then(function (selectedItem) {
          $scope.selected = selectedItem;
        }, function () {
          $log.info('Modal dismissed at: ' + new Date());
        });
      };
  });

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {

      $scope.items = items;
      $scope.selected = {
        item: $scope.items[0]
      };

      $scope.ok = function () {
        $modalInstance.close($scope.selected.item);
      };

      $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
      };
    });

请帮忙。我不确定我是否遗漏了为什么我无法查看模态窗口？

Answer 1

您的Open（）方法需要大小，但您没有指定一个。

HTML

<button class= 'btn btn-primary' ng-click="open()">Button</button>

的javascript

  $scope.open = function (size) {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size, //not specified in ng-click

将size:size替换为size:size||'sm'，以使用默认模式大小。

  $scope.open = function (size) {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size||'sm', //use a small modal unless specified

无法查看模态窗口。出现灰色屏幕，控制台没有错误

1 个答案: