3

上下文：我有一个左侧菜单（导航器）和右侧面板（内容）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();
                });

问题是整个页面都滚动了。

任何想法 ？

谢谢！

4

1 回答 1

0

一个可能的解决方案是让你的“孩子”成为一个指令。这样，您可以滚动元素，而不是整个页面

内容帮助.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
            });
        }
    }
}

内容面板.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>
于 2016-12-05T22:37:56.813 回答