Bootstrap + AngularJS + jQuery - 嵌套面板“崩溃”行为失败

时间：2015-11-27 03:30:54

标签： javascript jquery angularjs twitter-bootstrap

我正在尝试嵌入有效的手风琴panels。但是，我希望chevron icon在fa-chevron-down为panel-body时指向collapsed，在panel-body为not collapsed时指向正确。我写了一个directive来获得这种效果，它也有效。但是，当我将此指令应用于nested panel时，它对nested和parent起作用panel-heading。我究竟做错了什么？有更清洁的方法吗？

(function () {
          'use strict';
  
          angular
               .module('myApp', [])
               .directive('bsCollapse', bsCollapse);

          function bsCollapse() {
               var $ = window.$;
               
            var directive = {
                    restrict: 'EA',
                    link: linkFunc,
               };

               return directive;

               function linkFunc(scope, el, attr, ctrl) {
                    $(el[0])
                         .on('hide.bs.collapse', function (evt) {
                              $(evt.currentTarget)
                                   .prev()
                                   .children()
                                   .children()
                                   .removeClass('fa-chevron-down')
                                   .addClass('fa-chevron-right');
                         })
                         .on('show.bs.collapse', function (evt) {
                              $(evt.currentTarget)
                                   .prev()
                                   .children()
                                   .children()
                                   .removeClass('fa-chevron-right')
                                   .addClass('fa-chevron-down');
                         });
               }
          }
})();
<!DOCTYPE html>
<html lang="en" ng-app="myApp">

  <head>
    <meta charset="utf-8">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

  </head>

  <body>

    <div class="container">
      <!-- PARENT PANEL GROUP -->
      <div class="panel-group col-sm-6 col-sm-offset-3" id="accordion">

        <!-- PARENT PANEL -->
        <div class="panel panel-default">
          <!-- PARENT PANEL HEADING -->
          <div class="panel-heading" data-parent="#accordion" data-target="#collapseOne" data-toggle="collapse" role="button">
            <h4 class="panel-title">
              PARENT PANEL HEADING
              <i class="fa fa-chevron-down fa pull-right"></i>
            </h4>
          </div>
          <!-- PARENT PANEL COLLAPSE BODY -->
          <div bs-collapse class="panel-collapse collapse in" id="collapseOne" role="tabpanel">
            <div class="panel-body">
              <!-- NESTED PANEL GROUP -->
              <div class="panel-group" id="accordion2">
                <!-- NESTED PANEL -->
                <div class="panel panel-default">
                  <!-- NESTED PANEL HEADING -->
                  <div class="panel-heading" data-parent="#accordion2" data-target="#nestedCollapseOne" data-toggle="collapse" role="button">
                    <h4 class="panel-title">
                      NESTED PANEL HEADING
                      <i class="fa fa-chevron-down fa pull-right"></i>
                    </h4>
                  </div>
                  <!-- NESTED PANEL COLLAPSE BoDY -->
                  <div bs-collapse class="panel-collapse collapse in" id="nestedCollapseOne" role="tabpanel">
                    <div class="panel-body">
                      NESTED PANEL BODY....
                    </div>
                  </div>

                </div>
              </div>

            </div>
          </div>

        </div>



      </div>


    </div>

    <!-- JS Assets -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
   
  </body>

</html>

我尝试过以下答案中提到的方法。 scope, flag并遇到了这样的问题：当快速打开和关闭panel/accordion时，它会失败。请参阅sreenshots - 它们来自您提供的plnkr。谢谢。

This <code>fails</code> on quickly opening and closing the panel

As you can see the cirlce in red....

2 个答案:

答案 0 :(得分：0)

两个面板中的图标都受到影响，因为$ on事件在两个元素中同时被触发。我编辑了你的代码并在脚本中添加了几行代码并使用了angularjs的ng-class，这样更容易。这是一个羽毛demo。希望它有所帮助。

scipt.js：

scope.flag1 = true;
scope.flag2=true;
scope.parentDiv = function() {
  scope.flag1 = !scope.flag1;
};
scope.nestedDiv = function() {
  scope.flag2= !scope.flag2;
};

HTML：

<h4 class="panel-title">
   PARENT PANEL HEADING
<i ng-class="{'fa fa-chevron-down': flag1, 'fa fa-chevron-right': !flag1}" class="pull-right"></i>
        </h4>

<h4 class="panel-title">
   NESTED PANEL HEADING
 <i ng-class="{'fa fa-chevron-down': flag2, 'fa fa-chevron-right': !flag2}" class="pull-right"></i>
                </h4>

答案 1 :(得分：0)

我找到了一个CSS解决方案。值得庆幸的是，Bootstrap会将collapsed课程引入panel-heading。从那里我可以添加这种样式，将chevron-right添加到:before伪类。 此外，这不需要指令或AngularJS代码。

感谢stackoverflow参考：

Use Font Awesome Icons in CSS

＆＃13;
＆＃13; 
div.panel-heading i {
  position: relative;
}
div.panel-heading.collapsed i:before {
  content: "\f054";
  font-family: FontAwesome;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
  <meta charset="utf-8">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

</head>

<body>

  <div class="container">
    <!-- PARENT PANEL GROUP -->
    <div class="panel-group col-sm-6 col-sm-offset-3" id="accordion">

      <!-- PARENT PANEL -->
      <div class="panel panel-default">
        <!-- PARENT PANEL HEADING -->
        <div class="panel-heading" data-parent="#accordion" data-target="#collapseOne" data-toggle="collapse" role="button">
          <h4 class="panel-title">
              PARENT PANEL HEADING
              <i class="fa fa-chevron-down fa pull-right"></i>
            </h4>
        </div>
        <!-- PARENT PANEL COLLAPSE BODY -->
        <div bs-collapse class="panel-collapse collapse in" id="collapseOne" role="tabpanel">
          <div class="panel-body">
            <!-- NESTED PANEL GROUP -->
            <div class="panel-group" id="accordion2">
              <!-- NESTED PANEL -->
              <div class="panel panel-default">
                <!-- NESTED PANEL HEADING -->
                <div class="panel-heading" data-parent="#accordion2" data-target="#nestedCollapseOne" data-toggle="collapse" role="button">
                  <h4 class="panel-title">
                      NESTED PANEL HEADING
                      <i class="fa fa-chevron-down fa pull-right"></i>
                    </h4>
                </div>
                <!-- NESTED PANEL COLLAPSE BoDY -->
                <div bs-collapse class="panel-collapse collapse in" id="nestedCollapseOne" role="tabpanel">
                  <div class="panel-body">
                    NESTED PANEL BODY....
                  </div>
                </div>

              </div>
            </div>

          </div>
        </div>

      </div>



    </div>


  </div>

  <!-- JS Assets -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题