Databases
StackOverflow2013
Postsdbo
POClosing Twitter Bootstrap Modal From Angular Controller
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POClosing Twitter Bootstrap Modal From Angular Controller
    text
    copied!<p>I have a modal window that I use to present a form to users. They enter the information and then press a button the has an ng-click. The server processes the request and sends back a response. When the response is success I want to close the modal window from the controller. How can this be achieved?</p> <p>The modal is a partial included in another page</p> <p>Main page:</p> <pre><code>&lt;!-- main content --&gt; &lt;p&gt;Foo&lt;/p&gt; &lt;!-- angular directive --&gt; &lt;foo-directive&gt;&lt;/foo-directive&gt; </code></pre> <p>Content of that directive:</p> <pre><code>&lt;div ng-controller="FooCtrl"&gt; &lt;ul class="thumbnails"&gt; &lt;li class="span3 tile tile-white" ng-repeat="foo in model.foo"&gt; &lt;div&gt; {{foo.bar}} &lt;/div&gt; &lt;div&gt; ({{foo.bam}}) &lt;/div&gt; &lt;div&gt; &lt;a data-toggle="modal" href="#myModal"&gt;&lt;img src="{{foo.imgPath}}"&gt;&lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;!-- foo modal partial included by ejs --&gt; &lt;% include foo_modal.ejs %&gt; &lt;/div&gt; </code></pre> <p>Modal markup:</p> <pre><code>&lt;div id="fooModal" class="modal hide fade in" style="display: none; "&gt; &lt;div class="modal-header"&gt; &lt;a class="close" data-dismiss="modal"&gt;×&lt;/a&gt; &lt;h3&gt;New Device&lt;/h3&gt; &lt;/div&gt; &lt;div class="modal-body"&gt; &lt;h4&gt;Foo Modal&lt;/h4&gt; &lt;div ng-controller="FooCtrl"&gt; &lt;form name="fooFrm"&gt; &lt;input id="email" type="email" class="input-medium" ng-model="fooEmail" placeholder="Email"&gt; &lt;button class="btn btn-primary btn-small" ng-click="doFoo({email:fooEmail})"&gt;Email Link&lt;/button&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;a href="#" class="btn" data-dismiss="modal"&gt;Close&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Controller code:</p> <pre><code>functionFooCtrl($scope, FooService) { $scope.doFoo= function (email) { FooService.save({email:email.fooEmail}) { alert('Request successful'); //TODO close Twitter bootstrap modal named fooModal here }, function (err) { alert('Your request bonked, sorry'); //TODO close twitter bootstrap modal named fooModal here }); } }; </code></pre> <p>What is the right way to close the modal from the controller in the success and error functions?</p> <p>Thanks in advance,</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload