Question

我对模态有一个奇怪的问题。它应该是一个绝对正常的模式，我可以打开和关闭很多次，但我可以打开一个，也只是关闭一次！ http://plnkr.co/ksTy0HdifAJDhDf4jcNr

我的 index.html 文件看起来像这样：

<body ng-controller="MainCtrl">
  <div ng-include src="'widget.html'" ng-controller="WidgetCtrl"></div>
  <!-- other widgets and content -->
</body>

正如您所看到的，我已将我的应用程序分配到不同的部分（称为小部件），我在我的索引html文件中包含了每个ng-include。每个小部件都有自己的控制器。

widget.html 如下所示：

<div modal="theModal">
    <div class="modal-header"><h3>The Modal</h3></div>
    <div class="modal-body">
      Body intentionally left blank
    </div>
    <div class="modal-footer">
        <button class="btn" type="button" ng-click="CloseModal()">ok</button>
    </div>
</div>
<!-- more modals and other stuff -->
<button ng-click="OpenModal()">open modal</button>

现在是小部件控制器（它是主控制器的子控制器）

app.controller('WidgetCtrl', function ($scope) {
  $scope.OpenModal  = function() { $scope.theModal = true; }
  $scope.CloseModal = function() { $scope.theModal = false;}
});

用于打开和关闭模态的所有内容都是子控制器（WidgetCtrl）的一部分，因此不应与父控制器中的任何内容冲突。

$scope.theModal位于undefined的开头，因此未显示模态。点击按钮$scope.theModal即可定义并设置为true;这是由Angular UI触发的，并显示了模态。点击“确定”后，现有的$scope.theModal设置为false，模式就会消失。一切都很完美但是......它不再起作用了！

Answer 1

您只需在小部件的第一个div中包含close="CloseModal()"

<div modal="theModal" close="CloseModal()">
  <div class="modal-header"><h3>The Modal</h3></div>
    <div class="modal-body">
      Body intentionally left blank
    </div>
    <div class="modal-footer">
      <button class="btn" type="button" ng-click="CloseModal()">ok</button>
    </div>
</div>

这是一个有效的plunker

Angular UI Bootstrap - 我只需打开和关闭一个模态

1 个答案: