Bootstrap Modals将我重定向到空白页

Question

没有构建系统，我创建的网站可以正常运行。 但是，我目前在使用Yeoman：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">&times;</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> 

Answer 1

这可能与您如何将服务注入各种有角项目有关。 如果您在某个时候没有注入硬编码的字符串，那么缩小可能会破坏您的应用程序。 我猜您已经知道了，但是也许您错过了某个地方。

您可以使用如下语法：

function PhoneListCtrl($scope, $http) {...}
PhoneListCtrl.$inject = ['$scope', '$http'];
phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);

要么

function PhoneListCtrl($scope, $http) {...}
phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', PhoneListCtrl]);

第一种方法不那么受欢迎，但就最佳实践而言通常更可取。

Answer 2

我很幸运地找到了为什么不弹出模态的解决方案。 我必须在锚元素中忽略“ 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>