AngularJS/ui-bootstrap accordion - di chuyển đến đầu accordion đang hoạt động (mở) khi nhấp vào

Question

Khi mở một bảng điều khiển, tôi cần phải cuộn nó trở lại ".panel-title" của cái vừa được nhấp. Tôi biết rằng tôi có thể tạo ra một chỉ thị để làm điều này như (nhận này từ this site):

.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; 
     }); 
    } 

Và trong HTML tôi đã được yêu cầu sử dụng:

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

Nhưng điều này dường như không công việc. Khi bạn nhấp vào bảng điều khiển thứ hai nó sẽ mở bảng điều khiển đầu tiên và thứ hai và nó thậm chí không bao giờ cuộn lên trên cùng khi mở bảng thứ ba.

Tôi chỉ cần cuộn để quay lại "tiêu đề .panel" của bảng điều khiển đã được nhấp. Tôi nghĩ rằng nó là khá vô lý rằng điều này có vẻ là rất khó khăn để làm khi rất nhiều thời gian nội dung bảng điều khiển có thể nhận được khá dài và tôi nghĩ rằng hầu hết mọi người sẽ muốn di chuyển đến đầu của thông tin khi một bảng điều khiển được mở ra.

Tôi đã xem các bài đăng khác ở đây nhưng dường như họ không giao dịch với AngularJS. Tôi đang sử dụng "ui-bootstrap-tpls-2.1.3"

EDIT - Here is a Plunker để chơi nếu bạn muốn.

Bất kỳ trợ giúp nào được đánh giá cao.

Answer 1

này có thể là một phương pháp nhanh chóng và dơ bẩn, nhưng hoạt động hoàn hảo

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>