连接到AngularJS页面的一部分
连接到AngularJS页面的一部分
你们中有谁知道如何在AngularJS中很好地处理锚点链接?\n我有一个简单的常见问题页面,标记如下:\n
问题1 问题2 问题3问题1
问题2
问题3
\n当点击上述任何链接时,AngularJS会拦截并将我路由到完全不同的页面(在我的情况下,一个404页面,因为没有与链接匹配的路由)。\n我最初的想法是创建与\"/faq/:chapter\"匹配的路由,并在相应的控制器中检查$routeParams.chapter
是否与匹配元素一致,然后使用jQuery滚动到该元素。\n但是AngularJS又让我失望了,它无论如何都会滚动到页面的顶部。\n那么,这里有没有人以前做过类似的事情,并知道一个好的解决方案?\n编辑:切换到html5Mode应该解决我的问题,但是我们必须支持IE8+,所以我担心这不是一个可接受的解决方案:/
问题的原因是在AngularJS中,使用锚点链接时,如果没有设置target属性,默认会在当前页面中加载所链接的部分,而不是在指定的页面中加载。解决方法是在创建链接时,添加target="_self"属性,同时在所链接的部分添加id属性。
具体解决方法如下:
Question 1 Question 2 Question 3
Question 1
Question 2
Question 3
需要注意的是,不需要使用"##"作为锚点链接的前缀。
在评论中提到的解决方法并不适用于所有情况,而使用target="_self"是最好的解决方案,无论是否开启了Html5Mode。
这是一个简单完整的解决方法,不需要添加额外的Angular依赖。即使浏览器还没有渲染锚点,它仍然能正常工作。
该解决方法是正确的,不需要使用Angular的$anchorScroll服务。可以参考HTML a标签的文档。
感谢提供这个解决方案,但只需要使用target="_self"和即可,如答案中所提到的。
在AngularJS中,使用$location.hash()修改hash值时,会触发路由逻辑。为了解决这个问题,可以使用以下trick:
$scope.scrollTo = function(id) { var old = $location.hash(); $location.hash(id); $anchorScroll(); //将hash值重置为旧值,以防止其他路由逻辑触发 $location.hash(old); };
这个方法非常实用,可以防止页面重新加载,同时保持路由的清洁。但是,有些用户遇到了一些问题,比如URL不会更新目标id的值,或者在使用Angular 1.4x时无法滚动页面等。
对于URL不会更新目标id的问题,可以尝试使用.replace()方法代替设置旧值:
$location.hash(id).replace();
对于滚动问题,有用户建议直接使用if语句判断$location.hash()是否存在,然后调用$anchorScroll():
if($location.hash()) $anchorScroll();
还有用户建议将#target添加到URL中,这样会更好:
...
总结起来,对于AngularJS中的页面部分链接问题,可以使用上述方法进行处理。但需要注意的是,这些方法可能在不同版本的AngularJS中表现不同,需要根据实际情况进行调整。
问题的原因是想要在AngularJS中实现页面内部的链接跳转(Link to a part of the page)。解决方法是使用$anchorScroll()函数来实现。
具体的解决方法如下:
1. 首先,在控制器中注入$location和$anchorScroll服务。
2. 在控制器中定义一个scrollTo函数,接收一个id参数。
3. 在scrollTo函数中,使用$location.hash()方法设置要滚动到的元素的id。
4. 调用$anchorScroll()函数进行滚动操作。
5. 在HTML中,使用ng-click指令调用scrollTo函数,并传入要滚动到的元素的id。
6. 在要滚动到的元素上设置对应的id。
如果需要在路由(routing)中使用该功能,可以按照以下步骤进行设置:
1. 在AngularJS的路由配置中,添加代码来监听路由的变化。
2. 在路由变化时,使用$location.hash()方法设置要滚动到的元素的id。
3. 调用$anchorScroll()函数进行滚动操作。
此外,还提供了更简单的解决方法:
1. 在路由配置中,监听路由的变化。
2. 在路由变化时,使用$location.hash()方法设置要滚动到的元素的id。
3. 使用$anchorScroll()函数进行滚动操作。
如果在添加路由时出现问题,可能是因为ngView导致了每次URL的哈希变化都会触发路由重新加载。在没有路由的情况下,URL不会反映当前项目。如果调用location.hash(X)导致整个应用程序重新渲染,可能是其他原因导致。$location.hash()不会重新加载页面,如果出现重新加载页面的情况,可能是其他原因导致。
最后,建议在滚动到所需部分后,删除URL中的哈希,以避免URL被无关内容污染。可以使用$location.search('scrollTo', null)来实现。