Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular UI Bootstrap - I can open and close a modal just once

I have a weird problem with a modal. It should be a absolutely normal modal that I can open and close many times, but I can open just one and also just close one time! http://plnkr.co/ksTy0HdifAJDhDf4jcNr

My index.html file looks this:

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

As you can see I have devided my application in different parts (called widgets), that I am including per ng-include in my index html file. Every widget has it's own controller.

The widget.html looks like this:

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

And now the widget controller (which is a child controller of the main controller)

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

All stuff for opening and closing the modal is part of the sub controller (WidgetCtrl) and therefore shouldn't conflict with anything from the parent controller.

$scope.theModal is in the beginning undefined, so the modal is not shown. With a click on the button $scope.theModal is defined and set to true; this is triggered by Angular UI and the modal is shown. On a click of ok, the now existing $scope.theModal is set to false and the modal disappears. Everything is perfect but .. it's not working again!

like image 808
kwrl Avatar asked May 06 '13 13:05

kwrl


1 Answers

You just have to include close="CloseModal()" in the first div of your widget

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

Here is a working plunker

like image 105
Bertrand Avatar answered Oct 23 '22 13:10

Bertrand