Question

上下文：我有一个左菜单（导航器）和右面板（内容）div。导航器中的每个项目都链接到右侧面板中其部分的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>

AngularJS - 在单击不同div中的项目时滚动div容器

1 个答案: