AngularJS - 滚动div容器，当点击不同的div中的项目

Question

上下文：我有一个左侧菜单（导航器）和右侧面板（内容）divs。导航器中的每个项目都链接到右侧面板中其部分的ID。

问题：我试图在导航面板上点击菜单项时将右侧面板滚动到相应的部分。

我正在用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> 

JS：

范围父：

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