引导情态动词重定向我到一个空白页
Bootstrap Modals to redirects me to a blank page
我所做的网站完全没有构建系统。然而，我目前有一个问题与自导模态与约曼:Angular + Gulp构建系统。每当我单击列表项时，模态不会出现，它直接将我带到空白页面。我还没弄清楚这件事的原因。
在某种程度上，情态动词似乎不需要对脚本进行任何调整就能起作用。我重新启动了grunt服务器，又回到了原来的位置。我不明白为什么情态动词不出现，让我空白一页。什么好主意吗?
我想这可能与Angular路由有关，但我不确定。我已经做了一些调整，并且在控制台中没有收到任何类型的错误信息。我需要一些关于如何解决这个问题的建议。如有任何帮助，不胜感激。
链接到我的代码GitHub Repo
angular.module('sanMiguelApp')
.controller('Events',['$scope',function($scope){
$scope.eventname = [
{name:'Cinco De Mayo',date:'September',image: '../../images/cinco-de-mayo.jpg',number: 'first'},
{name:'River Fest',date:'September',image: '../../images/river-fest.jpg',number: 'second'},
{name:'School of Rock',date:'September',image: '../../images/school-of-rock.jpg',number: 'third'},
{name:'Golf Tournament',date:'September',image: '../../images/golf-tournament.jpg',number: 'fourth'},
{name:'20th Anniversary',date:'September',image: '../../images/anniversary.jpg',number: 'fifth'}
];
}])
.controller('TabController', ['$scope', function($scope) {
$scope.tab = 1;
$scope.setTab = function(newTab){
$scope.tab = newTab;
};
$scope.isSet = function(tabNum){
return $scope.tab === tabNum;
};
}]);<div class="row">
<div class="col-md-5">
<img ng-src="images/student.jpg" class="img-responsive thumbnail" alt="San-Miguel-Building">
</div>
<div class="col-md-7">
<div class = "motto text-center animated zoomIn">"Transforming lives throught education,commitment and love."</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="thumbnail">
<img class = "img-responsive" style="height:100px" src="https://cdn1.iconfinder.com/data/icons/education-vol-2/48/074-512.png" alt="San Miguel">
<div class="caption">
<h3 class = "text-center">School Announcements</h3>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" style = "height:50px" src="https://cdn0.iconfinder.com/data/icons/construction-2/512/announcement.png" alt="Announcement">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" style = "height:50px" src="https://cdn0.iconfinder.com/data/icons/construction-2/512/announcement.png" alt="Announcement">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" style = "height:50px" src="https://cdn0.iconfinder.com/data/icons/construction-2/512/announcement.png" alt="Announcement">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4" ng-controller= "TabController">
<div class="thumbnail">
<img class = "img-responsive" style="height:100px" src="http://www.cogransystems.com/wp-content/uploads/2013/07/sports-icon.png" alt="...">
<div class="caption">
<h3 class = "text-center">Sports Schedule</h3>
<ul class="nav nav-tabs">
<li role="presentation" ng-class="{active:isSet(1)}">
<a href ng-click="setTab(1)">Basketball</a>
</li>
<li role="presentation" ng-class="{active:isSet(2)}">
<a href ng-click="setTab(2)">Soccer</a>
</li>
<li role="presentation" ng-class="{active:isSet(3)}">
<a href ng-click="setTab(3)">Softball</a>
</li>
</ul>
<table class="table" ng-show="isSet(1)">
<thead>
<tr>
<th>Date</th>
<th>Opponent</th>
<th>Basketball</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">3/12</th>
<td>San Miguel</td>
<td>@McKinley Park</td>
</tr>
<tr>
<th scope="row">3/16</th>
<td>San Miguel</td>
<td>@McKinley Park</td>
</tr>
<tr>
<th scope="row">3/19</th>
<td>San Miguel</td>
<td>@McKinley Park</td>
</tr>
</tbody>
</table>
<table class="table" ng-show="isSet(2)">
<thead>
<tr>
<th>Date</th>
<th>Opponent</th>
<th>Soccer</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">3/12</th>
<td>San Miguel</td>
<td>@McKinley Park</td>
</tr>
<tr>
<th scope="row">3/16</th>
<td>San Miguel</td>
<td>@McKinley Park</td>
</tr>
<tr>
<th scope="row">3/19</th>
<td>San Miguel</td>
<td>@McKinley Park</td>
</tr>
</tbody>
</table>
<table class="table" ng-show="isSet(3)">
<thead>
<tr>
<th>Date</th>
<th>Opponent</th>
<th>Softball</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">3/12</th>
<td>San Miguel</td>
<td>@McKinley Park</td>
</tr>
<tr>
<th scope="row">3/16</th>
<td>San Miguel</td>
<td>@McKinley Park</td>
</tr>
<tr>
<th scope="row">3/19</th>
<td>San Miguel</td>
<td>@McKinley Park</td>
</tr>
</tbody>
</table>
<!-- <div class="list-group text-center">
<a href="#" class="list-group-item"><i class="fa fa-male fa-2x fa-fw pull-left"></i> Basketball</a>
<a href="#" class="list-group-item"><i class="fa fa-female fa-2x fa-fw pull-left"></i> Basketball</a>
<a href="#" class="list-group-item"><i class="fa fa-male fa-2x fa-fw pull-left"></i>Soccer</a>
<a href="#" class="list-group-item"><i class="fa fa-female fa-2x fa-fw pull-left"></i> Soccer</a>
<a href="#" class="list-group-item"><i class="fa fa-male fa-2x fa-fw pull-left"></i> Softball</a>
</div> -->
</div>
</div>
</div>
<div class="col-sm-12 col-md-2">
<div class="thumbnail" ng-controller ="Events">
<img class = "img-responsive" style="height:100px" src="http://ketchikanpubliclibrary.org/wp-content/uploads/2014/10/events-calendar-icon-300x300.png" alt="...">
<div class="caption">
<h3 class = "text-center">Events</h3>
<div class="list-group text-center" ng-repeat = "events in eventname">
<a href="#" class="list-group-item" data-toggle="modal" data-target="#{{events.number}}"></i>{{events.name}}</a>
<div class="modal fade" id="{{events.number}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">{{events.name}}</h4>
</div>
<div class="modal-body">
<div class = "row">
<div class = "col-md-12">
<img style = "height:150px,width: 50px"class = "img-responsive" src ="{{events.image}}"
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>这可能与你如何将服务注入到各种angular项目中有关。如果你没有在某些时候注入硬编码字符串，那么最小化很可能会破坏你的应用。我猜你已经知道了这一点，但也许你在某个地方遗漏了一个。
可以使用如下语法:
function PhoneListCtrl($scope, $http) {...}
PhoneListCtrl.$inject = ['$scope', '$http'];
phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);
或
function PhoneListCtrl($scope, $http) {...}
phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', PhoneListCtrl]);
第一种方法不太流行，但在最佳实践方面通常更受欢迎。
我幸运地找到了为什么情态动词没有弹出的解决方案。我不得不省略锚元素中的"href"属性。因此，我将任何未知页面的路由编程为"#/"。这就是为什么它带我到一个空白页，而不是弹出引导模式的原因。教训!
<a href="#" class="list-group-item" data-toggle="modal" data-target="#{{events.number}}"></i>{{events.name}}</a>
<a class="list-group-item" data-toggle="modal" data-target="#{{events.number}}"></i>{{events.name}}</a>相关文章：
- php重定向到一个空白页面
- laravel中的ajax会重新加载一个空白页面
- jQuery's$.post只返回一个空白数据
- I'当我试图将java脚本加载到web视图中时，我得到了一个空白屏幕
- Facebook重定向到一个空白的权限请求页面
- 我正在尝试将 HTML 画布转换为 HTML 图像，但得到一个空白图像
- 提交邮件黑猩猩订阅 php 后，我有一个空白页
- 当我打开它时，它会显示一个空白网页
- 提交回复后 Ajax 它显示一个空白的数据空间
- 当我添加javascript时，它会显示一个空白页
- 为什么当我在 Emberjs 中最后用“id”刷新 url 时，我得到一个空白应用程序
- 使用按钮使用文本框中的值更新数据库字段，它显示一个空白值
- 我得到一个空白值和未定义的索引
- 使用jquery的javascript传递一个空白值
- 为什么这个Meteor示例应用程序只显示一个空白页面
- 有什么方法可以让用户从角度下拉菜单中选择一个空白值吗
- 为什么可以't我在浏览器中运行一个空白的Cordova应用程序:您可能没有运行此项目所需的环境或操作系统
- 如何将一个空白字符串变量设置为等于另一个字符串变量
- 使用不同的持续时间显示一个接一个的图像，中间有一个空白屏幕
- 当结果集为null时，JasperRunManager.runReportToPdfStream返回一个空白pdf
