hrefと$ anchorScrollを使用してAngularページをスクロールし、ページを再ロードせずに

Question

メニューリンクを作成しようとしていますが、ページをリロードせずに1ページのさまざまな場所にスクロールできます。以前に尋ねられたいくつかの質問を使用してこれを動作させることができましたが、directiveを使用してこの作業を行うのは苦労しています。

本当にありがとうございます。以下は

参照されたページと、私は基本的なスクロールを実現するために使用していますコンセプトです：

href overrides ng-click in Angular.js

angularjs $anchorScroll sometimes refresh all page

あなたが埋め込まれたメニューとaがあり、私のPlunkerに気づくでしょう指示メニュー。埋め込みメニューと機能は動作していますが、ディレクティブメニューを機能させることはできません。ここで

は、テストのための私のPlunkerで、この設定：

Test Plunker

Answer 1

誰にも同様の質問を持っている可能性がある場合、私は次のような方法で自分の問題を解決：

1.このメソッドを追加して、自分のメニューから** Controllerを呼び出しました：**

$scope.redirectTodiv = function (divname, event) { 
       var id = $location.hash(); 
       $location.hash(divname); 
       $anchorScroll(); 
       $location.hash(id); 
}; 

$locationと$anchorScrollをコントローラに依存して追加することを忘れないでください！

2.私のメニュー場合、これはコードです：

<section class="adminMenu" ng-class="menuStateClass"> 
    <h3>{{fusionTitle}}</h3> 
    <div id="minMaxMenu" ng-click="minMaxMenu()"> 
    <img src="images/collapse.svg" title="Click to expand" width="23" height="23" id="menuExpand" class="collapseIcon" ng-class="arrowDirectionClass" /> <span ng-show="showMenuHideText">Hide Menu</span> 
    </div> 
    <nav class="side-nav"> 
     <ul> 
     <li id="socialMediaClick"><a href ng-click="redirectTodiv('top', $event)"><img title="Post List" src="images/postList.svg" title="" height="25" /><span class="navText">Summary</span></a></li> 
     <li><a href ng-click="redirectTodiv('mentionList', $event)"><img title="Mentions List" src="images/postList.svg" title="" height="25" /><span class="navText">Mentions List</span></a></li> 
     <li><a href ng-click="redirectTodiv('volume', $event)"><img title="Volume" src="images/volumeHour.svg" title="" height="25" /><span class="navText">Volume</span></a></li> 
     <li><a href ng-click="redirectTodiv('mediaSource', $event)"><img title="Media Source" src="images/postSource.svg" title="" height="25" /><span class="navText">Media Source</span></a></li> 
     <li><a href ng-click="redirectTodiv('sentiment', $event)"><img title="Sentiment" src="images/sentiment.svg" height="25" /><span class="navText">Sentiment</span></a></li> 
     <li><a href ng-click="redirectTodiv('engagers', $event)"><img title="Engagers" src="images/engagement.svg" height="25" /><span class="navText">Engagers</span></a></li> 
     <li><a href ng-click="redirectTodiv('linkShares', $event)"><img title="Link Shares" src="images/source_list.svg" height="25" /><span class="navText">Link Shares</span></a></li> 
     <li><a href ng-click="redirectTodiv('hashtags', $event)"><img title="Hashtags" src="images/hashtag.svg" height="25" /><span class="navText">Hashtags</span></a></li> 
     <li><a href ng-click="redirectTodiv('appsUsed', $event)"><img title="Apps Used" src="images/twitterPlatform.svg" height="25" /><span class="navText">Apps Used</span></a></li> 
     <li><a href ng-click="redirectTodiv('demographics', $event)"><img title="Demographics" src="images/demographics.svg" height="25" /><span class="navText">Demographics</span></a></li> 
     <li><a href ng-click="redirectTodiv('wordCloud', $event)"><img title="Word Cloud" src="images/wordCloud.svg" height="25" /><span class="navText">Word Cloud</span></a></li> 
     <li><a href="#summary_social_mentions_social_media#/support"><img title="Support" src="images/help.svg" title="" height="25" /><span class="navText">Support</span></a></li> 
     </ul> 
    </nav> 
</section> 

3.私は単に私のControllerは、カスタムDirectiveで使用するために私のControllerとして私の見解の機能に使用指定：

<og-social-mentions-social-media-nav ng-controller="SocialMentionsAnalysisController"></og-social-mentions-social-media-nav>

NOTE：ControllerとDirectiveの両方であなたの$scopeを追跡することが重要です。私の場合、私はDirectiveに最小限の機能しか持たず、$scopeの汚染や衝突に問題はありません。