3

コンテキスト: 左メニュー (ナビゲーター) と右パネル (コンテンツ) の div があります。ナビゲーターのすべてのアイテムは、右側のパネルのセクションの ID にリンクされています。

問題: ナビゲーション パネルからメニュー項目をクリックすると、右側のパネルを対応するセクションにスクロールしようとしています。

私はanchorScroll()とlocator.hash()関数でそれをやっています。動作しますが、ページ全体 (ナビゲーションとコンテンツ) をスクロールします。

2 つのコントローラーを作成しました。1 つは親 (ナビゲーターを含む) 用で、もう 1 つはコンテナー (スクロールしたいもの) 用です。メニューからアイテムをクリックすると、スコープ内の変数が変更されます。

次に、子スコープから、その変数を見て、スクロールを実行しています

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

考えられる解決策は、「子」をディレクティブにすることです。そうすれば、ページ全体ではなく要素をスクロールできます

content-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>
于 2016-12-05T22:37:56.813 に答える