编辑:http://jsfiddle.net/k7tw188c/
不知道为什么它可以在 jsfiddle 上运行，但不能在我的电脑上运行!
<小时/>我正在开发一个示例 Angular 应用程序，其中我尝试在单击事件上启动模式窗口。代码是:
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()">×</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。不确定为什么模式不显示。请帮忙!
最佳答案
尝试用这个代替你的模态:
<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()">×</button>
<h3>{{selectedEmail.subject}}</h3>
</div>
<div class="modal-body">Body</div>
<div class="modal-footer">Footer</div>
</div>
</div>
</div>
关于javascript - Angular Bootstrap 模态未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31889384/