AngularJS / ui-bootstrap手風琴 - 點擊時滾動到活動（開放）手風琴的頂部

Question

當面板打開時，我需要將其滾動回剛剛單擊的面板的“.panel-title”。 我知道我可以創建一個指令來執行此操作，例如（從此站點獲取此信息 ）：

.directive( 'scrollTop', scrollTop );

  function scrollTop() {
      return {
          restrict: 'A',
          link: link
      };
  }

  function link( $scope, element ) {
      $scope.collapsing = false;
      $scope.$watch( function() {
          return $(element).find( '.panel-collapse' ).hasClass( 'collapsing' );
      }, function( status ) {
          if ( $scope.collapsing && !status ) {
              if ( $(element).hasClass( 'panel-open' ) ) {
                  $( 'html,body' ).animate({
                      scrollTop: $(element).offset().top - 20
                  }, 500 );
              }
          }
          $scope.collapsing = status;
      } );
  }

在我應該使用的HTML中：

<div uib-accordion-group is-open="status.openPanel" scroll-top></div>

但這似乎不起作用。 單擊第二個面板時，它會打開第一個和第二個面板，打開第三個面板時它甚至不會滾動到頂部。

我只需要它回滾到被點擊的面板的“.panel-title”。 我認為，當面板內容很長時間以來，這似乎很難做到這是非常荒謬的，我想大多數人都希望在面板打開時滾動到信息的頂部。

我在這里看過其他帖子，但他們似乎沒有處理AngularJS。 我正在使用“ui-bootstrap-tpls-2.1.3”

編輯 - 如果你願意， 這是一個可以玩的普通話 。

任何幫助是極大的贊賞。

Answer 1

這可能是一種快速而骯臟的方法，但工作完美無缺

 angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']) .controller('AccordionDemoCtrl', function($scope) { $scope.oneAtATime = true; $scope.groups = [{ title: 'Dynamic Group Header - 1', content: 'Dynamic Group Body - 1' }, { title: 'Dynamic Group Header - 2', content: 'Dynamic Group Body - 2 Dynamic Group Header - 2 Dynamic Group Header - 2 Dynamic Group Header - 2 Dynamic Group Header - 2 Dynamic Group Header - 2' }]; $scope.items = ['Item 1', 'Item 2', 'Item 3']; $scope.addItem = function() { var newItemNo = $scope.items.length + 1; $scope.items.push('Item ' + newItemNo); }; $scope.status = { isFirstOpen: true, isFirstDisabled: false }; //scrolling var accordion = $('.accordion'), timeOut; accordion.on('click', '.panel-heading', function(e) { if(e.target.nodeName != 'SPAN') return; var element = this; clearTimeout(timeOut); //since we dont know the exact offsetTop for dynamic content //using timeout 350 which let angular complete its render timeOut = setTimeout(function() { accordion.animate({ scrollTop: element.offsetTop -2 }, 300); }, 350); }); }); 

 .accordion { max-height: 220px; overflow: auto; padding: 2px; 8px 0 0; } *:focus { outline: none !important; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-animate.js"></script> <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.0.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> <div ng-app="ui.bootstrap.demo"> <div ng-controller="AccordionDemoCtrl"> <script type="text/ng-template" id="group-template.html"> <div class="panel {{panelClass || 'panel-default'}}"> <div class="panel-heading"> <h4 class="panel-title" style="color:#fa39c3"> <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}">{{heading}}</span></a> </h4> </div> <div class="panel-collapse collapse" uib-collapse="!isOpen"> <div class="panel-body" style="text-align: right" ng-transclude></div> </div> </div> </script> <div class="accordion"> <uib-accordion close-others="oneAtATime"> <uib-accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled"> This content is straight in the template. </uib-accordion-group> <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups"> {{group.content}} </uib-accordion-group> <uib-accordion-group heading="Dynamic Body Content"> <p>The body of the uib-accordion group grows to fit the contents</p> <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button> <div ng-repeat="item in items">{{item}}</div> </uib-accordion-group> <uib-accordion-group heading="Custom template" template-url="group-template.html"> Hello </uib-accordion-group> <uib-accordion-group heading="Delete account" panel-class="panel-danger"> <p>Please, to delete your account, click the button below</p> <p>Please, to delete your account, click the button below</p> <p>Please, to delete your account, click the button below</p> <button class="btn btn-danger">Delete</button> </uib-accordion-group> <uib-accordion-group is-open="status.open"> <uib-accordion-heading> I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> </uib-accordion-heading> This is just some content to illustrate fancy headings. </uib-accordion-group> </uib-accordion> </div> </div> </div>