一尘不染

在angularjs中使用bootstrap崩溃

angularjs

我正在尝试在我的角度应用程序中包括以下Bootstrap可折叠面板。但是,当我单击“展开”时,似乎可以看到角度href="#collapseOne",然后将其重定向到主页,而不是折叠面板。我的路由看起来像这样,我认为otherwise({redirectTo:'/home'});是引起问题的原因。有什么建议?

angular.module('App')
.config(['$routeProvider', function($routeProvider) { 
$routeProvider.
  when('/users', {templateUrl: 'partials/users/user-list.html', controller: 'UserCtrl'}).
  when('/users/new', {templateUrl: 'partials/users/user-new.html', controller: 'UserNewCtrl'}).
  when('/users/:userid', {templateUrl: 'partials/users/user-detail.html', controller: 'UserDetailCtrl'}).


  otherwise({redirectTo: '/home'});
}]);

面板-

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Expand
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        ...
      </div>
    </div>
  </div>
  </div>

阅读 210

收藏
2020-07-04

共1个答案

一尘不染

作为一个类似的问题mentionned,简单地由数据目标属性改变您的href

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a href="javascript:;" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
          Expand
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        ...
      </div>
    </div>
  </div>
</div>
2020-07-04