takeradi takeradi - 2 months ago 27
AngularJS Question

Angular Bootstrap Modal Not Showing

EDIT: http://jsfiddle.net/k7tw188c/

Not sure why it works on jsfiddle but not on my PC!




I am working on a sample Angular app in which I am trying to launch a modal window on a click event. The code is:

HTML:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body ng-app="testapp">
<div class="container" ng-controller="TestController">
<ul class="nav nav-tabs">
<li ng-class="{active: activeTab=='inbox'}">
<a ng-click="activeTab='inbox'">Inbox</a>
</li>
<li ng-class="{active: activeTab=='sent'}">
<a ng-click="activeTab='sent'">Sent</a>
</li>
</ul>
<br/>
<table class="table table-bordered table-striped" ng-show="activeTab=='inbox'">
<caption>No of Emails: {{getTotalEmails(emails)}}. Mailbox Size: {{getTotalSize(emails)}}</caption>
<thead>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="email in emails" ng-click="showPopUp(email)">
<td>{{email.from}}</td>
<td>{{email.subject}}</td>
<td>{{email.date}}</td>
</tr>
</tbody>
</table>

<table class="table table-bordered table-striped" ng-show="activeTab=='sent'">
<caption>No of Emails: {{getTotalEmails(sentEmails)}}. Mailbox Size: {{getTotalSize(sentEmails)}}</caption>
<thead>
<tr>
<th>To</th>
<th>Subject</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="email in sentEmails" ng-click="showPopUp(email)">
<td>{{email.to}}</td>
<td>{{email.subject}}</td>
<td>{{email.date}}</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary">Compose</button>

<div class="modal" ng-show="isPopupVisible">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="closePopup()">&times;</button>
<h3>{{selectedEmail.subject}}</h3>
</div>
<div class="modal-body">
Body
</div>
<div class="modal-footer">
Footer
</div>
</div>
</div>
</body>




And the JS is:

var app = angular.module('testapp',[]);
app.controller('TestController',function($scope){
$scope.activeTab = 'inbox';
$scope.isPopupVisible = false;

$scope.emails = [
{
from: 'John',
to: 'me',
subject: 'I love angular',
date: 'Jan 1',
body: 'hello world!',
size: 10
},
{
from: 'Jack',
to: 'me',
subject: 'Angular and I are just friends',
date: 'Feb 15',
body: 'just kidding',
size: 10
},
{
from: 'Ember',
to: 'me',
subject: 'I hate you Angular!',
date: 'Dec 8',
body: 'wassup dude',
size: 10
}
];

$scope.getTotalEmails = function(emailArr){
return emailArr.length;
};

$scope.getTotalSize = function(emailArr){
return emailArr.reduce(function(prev,current){
return prev + current.size;
},0);
};

$scope.sentEmails = [
{
from: 'John',
to: 'me',
subject: 'I love angular',
date: 'Jan 1',
body: 'hello world!',
size: 10
},
{
from: 'Jack',
to: 'me',
subject: 'Angular and I are just friends',
date: 'Feb 15',
body: 'just kidding',
size: 10
},
{
from: 'Ember',
to: 'me',
subject: 'I hate you Angular!',
date: 'Dec 8',
body: 'wassup dude',
size: 10
},
{
from: 'Ember',
to: 'me',
subject: 'I hate you Angular!',
date: 'Dec 8',
body: 'wassup dude',
size: 10
}
];

$scope.showPopUp = function(email) {
$scope.isPopupVisible = true;
$scope.selectedEmail = email;
};

$scope.closePopup = function() {
$scope.isPopupVisible = false;
};
});


When I debug the app, the debugger enters the showPopUp function and correctly changes the isPopUpVisible flag to true. Not sure why the modal isn't displaying. Please help!

Answer

Try this in place of your modal:

<div class="modal fade in" aria-hidden="false" style="display: block;" ng-show="isPopupVisible">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="closePopup()">&times;</button>
         <h3>{{selectedEmail.subject}}</h3>
       </div>
       <div class="modal-body">Body</div>
       <div class="modal-footer">Footer</div>
     </div>
   </div>
 </div>