使用href和$ anchorScroll滚动到Angular页面上的各个位置,而不重新加载页面

时间:2016-12-12 08:24:58

标签: html angularjs angularjs-directive

我正在尝试创建菜单链接,允许用户滚动到单个页面上的各个位置而无需重新加载页面。我已经能够使用之前提出的一些问题来解决这个问题,但我正在努力使用directive来完成这项工作。

我真的很感谢你的帮助!

以下是我们用来实现基本滚动的参考页面和概念:

href overrides ng-click in Angular.js

angularjs $anchorScroll sometimes refresh all page

您会在我的Plunker中注意到有一个嵌入式菜单和一个指令菜单。嵌入式菜单和功能正在运行,但无法使我的指令菜单起作用。

以下是我的用于测试和设置的Plunker:

Test Plunker

1 个答案:

答案 0 :(得分:0)

如果其他人可能有类似的问题,我使用以下方法解决了我的问题:

<强> 1。我添加了此方法,以便通过我的** $result = $connection->fetchAll("SELECT shipregioncodes FROM shipregioncodes_shipregioncodes WHERE shipregioncodes=$postcode"); $count = count($result); if($count==0){ $this->_messageManager->addError("hiiiiiiii"); throw new NoSuchEntityException( __('Shipping is not available on provided zipcode %1', $postcode) ); } :**

中的菜单进行调用
Controller

请务必在控制器中添加 $scope.redirectTodiv = function (divname, event) { var id = $location.hash(); $location.hash(divname); $anchorScroll(); $location.hash(id); }; $location作为依赖项!

<强> 2。这是我的菜单的代码:

$anchorScroll

第3。我只是将用于我的视图功能的<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> 指定为我的Controller,以便在自定义Controller中使用

Directive

注意:<og-social-mentions-social-media-nav ng-controller="SocialMentionsAnalysisController"></og-social-mentions-social-media-nav>$scope中跟踪Controller非常重要。在我的情况下,我的Directive功能很少,我对Directive污染或冲突没有任何问题。