angular-ui 模态最初并未隐藏

Question

我正在关注 angular recipes page 向我的用户界面添加模式对话框。它建议了以下标记，我已将其添加到我的一个观点中。

... 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>

我想看到的是我的视图，加上底部的“打开模态”按钮，没有别的。相反，我看到的是页面上已经可见的按钮和模式的内容。

食谱文档中的下一句话是：

请注意，即使我们没有明确指定模式对话框 最初通过 modal 属性隐藏。仅控制器 处理按钮单击和模式使用的 showModal 值 属性。

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

<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 的官方文档中找到