angular-ui 模态框最初没有隐藏

Question

我正在关注此 angular recipes page 以将模式对话框添加到我的 ui。它建议使用以下标记，我已将其添加到我的一个视图中。

... html for my view is here ...
<button class="btn" ng-click="open()">Open Modal</button>
<div modal="showModal" close="cancel()">
  <div class="modal-header">
      <h4>Modal Dialog</h4>
      ... etc, from the recipe doc
</div>

我想看的就是我的观点，再加上底部的一个"Open Modal"按钮，除此之外别无他物。我看到的是页面上已经可见的按钮和模式内容。

食谱文档中接下来的单词是：

Note that even though we don’t specify it explicitly the modal dialog is hidden initially via the modal attribute. The controller only handles the button click and the showModal value used by the modal attribute.

为什么我的模态标记最初在页面上可见？我想我已经正确安装了 angular-ui... 在我的 index.html:

<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>

在我的应用程序 JS 中：

angular.module('MonteAdmin', [
    ...
    'ui.bootstrap',
    ...
  ])

Answer 1

该食谱页面可能已过时。在撰写本文时，可能可以将变量 showModal 传递给 modal 指令以显示或隐藏它。在您的控制器中，您可以通过将范围变量 showModal 设置为 true 或 false 来显示模态：

$scope.showModal = false;

$scope.open = function() {
  $scope.showModal = true;
}

当前版本不是这样的。如果您在 Angular UI Bootstrap

阅读该库的官方文档，您将获得更好的体验

如果您使用的是最新版本的库，指令不再是modal而是uib-modal。此外，您还需要做一些工作来实现您的模式。

模态标记应该在脚本标签中，根据官方示例设置类型为text/ng-template：

<script type="text/ng-template" id="stackedModal.html">
    <div class="modal-header">
        <h3 class="modal-title" id="modal-title-{{name}}">The {{name}} modal!</h3>
    </div>
    <div class="modal-body" id="modal-body-{{name}}">
        Having multiple modals open at once is probably bad UX but it's technically possible.
    </div>
</script>

要真正打开模式，您的按钮点击应触发以下示例函数：

var modalInstance = $uibModal.open({
  animation: $ctrl.animationsEnabled,
  ariaLabelledBy: 'modal-title',
  ariaDescribedBy: 'modal-body',
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  controllerAs: '$ctrl',
  size: size,
  appendTo: parentElem,
  resolve: {
    items: function () {
      return $ctrl.items;
    }
  }
});

您还必须为模态本身定义一个控制器：

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, items) {
  var $ctrl = this;
  $ctrl.items = items;
  $ctrl.selected = {
    item: $ctrl.items[0]
  };

  $ctrl.ok = function () {
    $uibModalInstance.close($ctrl.selected.item);
  };

  $ctrl.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
});

所有这些代码都可以在 Angular UI Bootstrap

的官方文档中找到

angular-ui 模态框最初没有隐藏

angular-ui modal is not initially hidden

html

angularjs

angular-ui

angular-ui-modal