AngularJS - 다른 div의 항목을 클릭 할 때 div 컨테이너 스크롤

Question

컨텍스트 : 왼쪽 메뉴 (탐색기)와 오른쪽 패널 (내용) div가 있습니다. 네비게이터의 모든 항목은 오른쪽 패널의 섹션 ID에 연결됩니다.

문제점 : 탐색 패널에서 메뉴 항목을 클릭 할 때 해당 섹션으로 오른쪽 패널을 스크롤하려고합니다.

내가 anchorScroll으로 그 일을하고있다() 및 locator.hash() 기능. 작동하지만 전체 페이지 (탐색 및 내용)를 스크롤합니다.

나는 부모 (네비게이터 포함)와 컨테이너 (스크롤하려는 사람)를위한 두 개의 컨트롤러를 만들었습니다. 메뉴에서 항목을 클릭하면 범위 내의 변수가 변경됩니다.

html: 

<!-- Navigation Panel --> 
<div id="helpNavigatorPanel"> 
    <ul> 
     <li ng-repeat="(value, item) in list" ng-click="setCurrentItem (item.title)"> 
     <a style="helpNavigationItems" href="#">{{item.title}}</a> 
     </li> 
    </ul> 
    </div> 

<div id="helpContentPanel"ng-controller="contentHelpController" > 

    <div id="scrollablePanel"> 
     <!-- List of help elements --> 
     <ul> 
     <li ng-repeat="some in list"> 
      <div id="{{some.title}}" style="margin-top: 3px; padding: 10px; border: 1px solid lightGrey;"> 
      ... 
      </div> 
      </div> 
     </li> 
     </ul>  
    </div>  
</div> 

JS :

범위 부모 :

$scope.setCurrentItem = function (currentItemID){ 
        $scope.currentItemID = currentItemID; 
       } 

그런 다음 아이의 범위에서, 나는

HTML로 스크롤을 수행, 그 변수를 시청하고 범위 하위 :

$scope.$watch('currentItemID', function (divDestinyID) { 
        $location.hash(divDestinyID); 
        $anchorScroll(); 
       }); 

문제는 페이지 전체가 스크롤된다는 것입니다.

아이디어가 있으십니까?

감사합니다.

Answer 1

가능한 해결책은 "자녀"를 지시어로 만드는 것입니다. 그런 식으로, 당신은 오히려 전체 페이지

내용 help.directive.js

angular 
    .module('appModule') 
    .directive('contentHelp', contentHelp); 

function contentHelp() { 
    var directive = { 
     bindToController: true, 
     controller: ContentHelpController, 
     controllerAs: 'vm', 
     restrict: 'EA', 
     scope: { 
      list: '=', 
      currentItemId: '=' 
     }, 
     templateUrl: 'contentPanel.html' 
    }; 
    return directive; 
} 

ContentHelpController.$inject = ['$scope', '$element']; 
/* @ngInject */ 
function ContentHelpController ($scope, $element) { 
    var vm = this; 

    $scope.$watch(function() { 
     return vm.currentItemId; 
    }, onIdChange); 

    //// 

    function onIdChange(newId) { 
     if(newId) { 
      var idElement = $element.find('#' + newId); 
      $element.animate({ 
       scrollTop: idElement.offset().top 
      }); 
     } 
    } 
} 

contentPanel.html

<div id="scrollablePanel"> 
    <!-- List of help elements --> 
    <ul> 
     <li ng-repeat="some in vm.list"> 
      <div id="{{::some.title}}" style="margin-top: 3px; padding: 10px; border: 1px solid lightGrey;"> 
       ... 
      </div> 
     </li> 
    </ul> 
</div> 

HTML보다, 요소에 스크롤 할 수 있습니다

<!-- Navigation Panel --> 
<div id="helpNavigatorPanel"> 
    <ul> 
     <li ng-repeat="(value, item) in list" ng-click="setCurrentItem (item.title)"> 
      <a style="helpNavigationItems" href="#">{{item.title}}</a> 
     </li> 
    </ul> 
</div> 
<div id="helpContentPanel" ng-controller="contentHelpController"> 
    <content-help list="list" current-item-id="currentItemId"></content-help> 
</div>