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”按钮，没有其他内容。我所看到的是按钮和模式的内容已经在页面上可见。

配方文档中的下一个词是：

请注意，即使我们没有明确指定模态对话框最初通过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的官方文档中找到

angular-ui模态最初未隐藏

1 个答案: