javascript - Angular Bootstrap Modal Not Showing

EDIT: /

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=".3.15/angular.min.js"></script>
    <link href=".3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src=".1.3/jquery.min.js"></script>
    <script src=".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!

EDIT: http://jsfiddle/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./ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn./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!

Share Improve this question edited Aug 8, 2015 at 3:54 asked Aug 8, 2015 at 3:37 takeradi 3,8718 gold badges31 silver badges56 bronze badges

Can you make a fiddle with your code? – Madhu Commented Aug 8, 2015 at 3:40
done. jsfiddle/k7tw188c It works there but not on my PC – takeradi Commented Aug 8, 2015 at 3:54

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

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>

The Vanilla Botstrap Modal also didn't work for me, so I ended up with ng-bootstrap Modal, which integrates better with Angular.

ng-bootstrap modal example

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Angular Bootstrap Modal Not Showing - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)