连接到AngularJS页面的一部分

13 浏览
0 Comments

连接到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+,所以我担心这不是一个可接受的解决方案:/

0
0 Comments

问题的原因是在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"和即可,如答案中所提到的。

0
0 Comments

在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中表现不同,需要根据实际情况进行调整。

0
0 Comments

问题的原因是想要在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)来实现。

0