Question

不确定为什么它适用于jsfiddle但不适用于我的电脑！

我正在开发一个示例Angular应用程序，我试图在click事件上启动一个模态窗口。代码是：

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>

JS是：

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;
    };
});

当我调试应用程序时，调试器进入showPopUp函数并正确地将isPopUpVisible标志更改为true。不知道为什么模态没有显示。请帮忙！

Answer 1

试试这个代替你的模态：

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

Answer 2

Vanilla Botstrap Modal也不适合我，因此我最终使用了ng-bootstrap Modal，该模块与Angular集成得更好。

ng-bootstrap modal example

Angular Bootstrap模态没有显示

2 个答案: