8

我对模态有一个奇怪的问题。它应该是一个绝对正常的模态，我可以多次打开和关闭，但我只能打开一个，也只能关闭一次！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>

如您所见，我将我的应用程序划分为不同的部分（称为小部件），我将每个 ng-include 包含在我的 index html 文件中。每个小部件都有自己的控制器。

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并且模式消失。一切都很完美，但是......它不再工作了！

4

1 回答 1

6

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

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

这是一个工作的笨蛋

于 2013-05-06T15:15:21.900 回答