本文介绍了使用带有angularjs引导崩溃的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

面板 -

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


解决方案

作为一个类似的问题Here,只需通过数据目标属性更改您的href

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

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引导崩溃的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-15 04:56