0
編輯：http://jsfiddle.net/k7tw188c/角度引導模態不顯示
不知道爲什麼它的工作原理上的jsfiddle但不是我的電腦！
我工作的一個樣品角的應用程序中，我試圖上的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()">×</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。不知道爲什麼模式不顯示。請幫忙！
你能用你的代碼小提琴？ – Madhu
完成。 http://jsfiddle.net/k7tw188c/ 它在那裏工作，但不在我的電腦上 – takeradi