使用带有angularjs引导崩溃 [英] Using bootstrap collapse with angularjs

问题描述

我想包括在我的角度应用下面的引导可折叠的面板。然而，当我点击展开，角度似乎看到的href =＃collapseOne，然后重定向到主页，而不是折叠面板。我的路由看起来是这样的，而且我觉得否则（{redirectTo：'/家'}）; 引起的问题。有什么建议？

  angular.module（应用）
的.config（['$ routeProvider'，函数（$ routeProvider）{
$ routeProvider。
  当（'/用户'，{templateUrl：'谐音/用户/用户list.html'，控制器：'UserCtrl'}）。
  当（'/用户/新'，{templateUrl：'谐音/用户/用户new.html'，控制器：'UserNewCtrl'}）。
  当（'/用户/：用户ID'，{templateUrl：'谐音/用户/用户detail.html'，控制器：'UserDetailCtrl'}）。
  否则（{redirectTo：'/家'}）;
}]）;
 

面板 -

 ＆LT; D​​IV CLASS =面板组ID =手风琴＆GT;
  ＆LT; D​​IV CLASS =面板面板默认＆GT;
    ＆LT; D​​IV CLASS =面板标题＆GT;
      ＆LT; H4类=面板标题＆GT;
        ＆LT;一个数据切换=崩溃的数据父=＃手风琴的href =＃collapseOne＆GT;
          扩大
        ＆所述; / A＆GT;
      ＆LT; / H4＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV ID =collapseOne级=＆GT面板崩溃崩溃;
      ＆LT; D​​IV CLASS =面板体＆GT;
        ...
      ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
 

解决方案

作为一个类似的问题<一mentionned href=\"http://stackoverflow.com/questions/19930383/bootstraps-tabs-with-data-toggle-cause-reload-in-angularjs\">Here,只需通过数据目标属性更改您的href

 ＆LT; D​​IV CLASS =面板组ID =手风琴＆GT;
  ＆LT; D​​IV CLASS =面板面板默认＆GT;
    ＆LT; D​​IV CLASS =面板标题＆GT;
      ＆LT; H4类=面板标题＆GT;
        ＆所述; A HREF =JavaScript的:;数据切换=崩溃的数据父=＃手风琴数据目标=＃collapseOne＆GT;
          扩大
        ＆所述; / A＆GT;
      ＆LT; / H4＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV ID =collapseOne级=＆GT面板崩溃崩溃;
      ＆LT; D​​IV CLASS =面板体＆GT;
        ...
      ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

I'm trying to include the below bootstrap collapsible panel in my angular application. However, when I click on "Expand", angular seems to see href="#collapseOne" and then redirects to the home page instead of collapsing the panel. My routing looks like this, and I think the otherwise({redirectTo: '/home'}); is causing the problem. Any suggestions?

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

The panel-

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

解决方案

As mentionned in a similar question Here, simply change your href by the data-target attribute

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

这篇关于使用带有angularjs引导崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！