Bootstrap Modals將我重定向到空白頁面

我製作的網站在沒有構建系統的情況下工作得很好。不過，我目前在使用Yeoman：Angular + Gulp構建系統時遇到了引導模式的問題。每當我點擊列表項目時，模式都不會出現，它會讓我直接進入空白頁面。我一直無法弄清楚這起事件的原因。Bootstrap Modals將我重定向到空白頁面

在某些時候，模式似乎工作，無需對腳本進行任何調整。我再次重新啓動了服務器，然後我又回到了原來的位置。我不明白爲什麼這些模態不會出現並將我帶到空白頁面。有任何想法嗎？

我在想這可能不得不做一些與角路由，但我不知道。我已經做了一些調整，並且在控制檯中沒有收到任何類型的錯誤消息。我需要一些關於如何解決問題的建議。任何幫助將不勝感激。

鏈接到我的代碼GitHub Repo

angular.module('sanMiguelApp') 
 
.controller('Events',['$scope',function($scope){ 
 
\t $scope.eventname = [ 
 
\t \t {name:'Cinco De Mayo',date:'September',image: '../../images/cinco-de-mayo.jpg',number: 'first'}, 
 
\t \t {name:'River Fest',date:'September',image: '../../images/river-fest.jpg',number: 'second'}, 
 
\t \t {name:'School of Rock',date:'September',image: '../../images/school-of-rock.jpg',number: 'third'}, 
 
\t \t {name:'Golf Tournament',date:'September',image: '../../images/golf-tournament.jpg',number: 'fourth'}, 
 
\t \t {name:'20th Anniversary',date:'September',image: '../../images/anniversary.jpg',number: 'fifth'} 
 
\t ]; 
 
}]) 
 
.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>

來源

2015-10-07 Recon

可以張貼代碼 –

我添加的代碼。看一看！ – Recon

它可能有事情做與你是如何注入服務整合到你的各種角度的項目。如果你在某些時候沒有使用硬編碼字符串進行注入，那麼縮小可能會破壞你的應用程序。我猜你已經知道了，但也可能你錯過了某個地方。

您可以使用類似語法：

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

或

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

第一種方法是不太受歡迎，但一般在最佳實踐方面更優選。

來源

2015-10-07 03:23:58

我確定我的語法不會中斷。如果你想看看他們，我添加了我的腳本。 – Recon

我很幸運的找到了解決方案爲什麼沒有彈出。我不得不在我的錨元素中省略「href」屬性。因爲，我爲任何未知頁面編寫了路由到「＃/」。這就是爲什麼它把我帶到一個空白頁面而不是彈出bootstrap模式。學過的知識！

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

來源

2015-10-07 04:58:34 Recon

Bootstrap Modals將我重定向到空白頁面

回答

相關問題