Question

我制作的网站在没有构建系统的情况下工作得很好。但是，我目前在使用Yeoman：Angular + Gulp构建系统的bootstrap模式时遇到问题。每当我点击列表项时，模态都不会出现，它会直接转到空白页面。我无法弄清楚这件事的原因。

在某些时候，模态似乎无需对脚本进行任何调整即可工作。我再次重新启动了grunt服务器，我又回到了原来的位置。我不明白为什么模态没有出现并把我带到空白页面。有什么想法吗？

我当时认为这可能与Angular Routing有关，但我不确定。我已经做了一些调整，我在控制台中没有收到任何类型的错误消息。我需要一些关于如何解决问题的建议。任何帮助将不胜感激。

指向我的代码GitHub Repo

的链接

＆＃13;

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;
    };
}]);

＆＃13;

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

＆＃13;

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

我幸运地找到了为什么模态不会弹出的解决方案。我不得不省略＆＃34; href＆＃34;我的锚元素中的属性。因为，我将路由编程为＆＃34;＃/＆＃34;对于任何未知页面。这就是为什么它把我带到一个空白页而不是弹出bootstrap模态的原因。经验教训！

＆＃13;

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

＆＃13;

Bootstrap Modals将我重定向到空白页面

2 个答案: