AngularJS - контейнер прокрутки div при нажатии на элемент в другом div

Question

Контекст: у меня есть левое меню (навигатор) и правые (контентные) div. Каждый элемент навигатора привязан к идентификатору его раздела в правой панели.

Проблема: я пытаюсь прокрутить правую панель к соответствующему разделу при нажатии на пункт меню с панели навигации.

Я делаю это с anchorScroll() и locator.hash() функции. Он работает, но он прокручивает всю страницу (навигация и контент).

Я создал два контроллера: один для родителя (включая навигатор) и другой для контейнера (тот, который я хочу прокрутить). Когда я нажимаю элемент в меню, я изменяю переменную в пределах области.

Затем из детской сферы, я наблюдаю эту переменную, выполняя свиток с

HTML:

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> 

ЯШ:

Scope родительскими:

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

Сфера охвата ребенка:

$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>