0

我正在关注这个angular recipes 页面，以便在我的 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>

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

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

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

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

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

在我的应用程序 JS 中：

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

1 回答 1

0

该食谱页面可能已过时。在撰写本文时，可能已经可以将变量传递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 的官方文档中找到

于 2017-02-13T18:25:24.077 回答