在 angularjs 中使用 bootstrap 折叠 [英] Using bootstrap collapse with angularjs

查看：23
本文介绍了在 angularjs 中使用 bootstrap 折叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

angular.module('App').config(['$routeProvider', function($routeProvider) {$routeProvider.当('/用户'，{templateUrl:'partials/users/user-list.html'，控制器:'UserCtrl'}).when('/users/new', {templateUrl: 'partials/users/user-new.html', 控制器: 'UserNewCtrl'}).when('/users/:userid', {templateUrl: 'partials/users/user-detail.html', 控制器: 'UserDetailCtrl'}).否则({redirectTo: '/home'});}]);

面板-

<div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">扩张</a>
<div id="collapseOne" class="panel-collapse 折叠在"><div class="panel-body">...

解决方案

正如在类似问题中提到的 此处，只需通过 data-target 属性更改您的 href

<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">扩张</a>
<div id="collapseOne" class="panel-collapse 折叠在"><div class="panel-body">...

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 中使用 bootstrap 折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆