我想补充一些链接我Angular2页面上,当点击,将跳转到特定位置内该页面,像什么正常的井号标签做.所以链接会是这样的
/users/123#userInfo
/users/123#userPhoto
/users/123#userLikes
等等
我不认为我需要HashLocationStrategy,因为我对正常的Angular2方式很好,但是如果我直接添加,链接实际上会跳转到根目录,而不是同一页面上的某个地方.任何方向表示赞赏,谢谢.
是否可以使用Angularjs的锚链接？
即:
<a href="#top">Top</a>
<a href="#middle">Middle</a>
<a href="#bottom">Bottom</a>
<div name="top"></div>
...
<div name="middle"></div>
...
<div name="bottom"></div>
谢谢
非常类似于这个角度问题:当使用react-router时,如何使用锚链接进行页内导航？
换句话说,在使用react-router时如何实现以下纯HTML？
<a href="#faq-1">Question 1</a>
<a href="#faq-2">Question 2</a>
<a href="#faq-3">Question 3</a>
<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="fa1-3">Question 3</h3>
目前,我拦截了对此类链接的点击,并滚动到锚点位置.这并不令人满意,因为这意味着无法直接链接到页面的某个部分.
我需要设置一个ng-click事件,以便它加载一个新页面,然后,一旦页面加载,滚动到页面上的一个锚点.我已经尝试过在这个SO帖子上提出的每个解决方案,但我无法让它正常工作.
大多数解决方案都围绕滚动到已加载的页面上的锚点.我需要在加载新页面后进行滚动.
这是我的观看代码:
<div class="see-jobs-btn" ng-click="$event.stopPropagation();goToResultJobs(r)">See Jobs</div>
这表示"个人资料卡"中的按钮.当用户点击卡片时,它会将他们带到个人资料页面.但是,当他们单击按钮时,需要将它们带到该配置文件页面的#jobs部分(因此代码中的goToResultJobs(r)之前的$ stopPropogation()).
这是我的goToResultJobs方法的样子.
$scope.goToResultJobs = function(result) {
var profileUrl = result.slug;
window.location = profileUrl;
};
我已经尝试过使用$anchorScroll并且只是在锚中硬编码profileUrl,但是没有人工作.我对Angular很新,所以我不知道我在这里缺少什么.
更新1:尝试使用$ timeout
这是我goToResultJobs在ResultsCtrl中的方法,当用户单击按钮时触发该方法:
$scope.goToResultJobs = function(result) {
var url = window.location + result.slug + '#jobs';
location.replace(url);
};
加载/name#jobs路径,调用下面的ProfileCtrl:
app.controller('ProfileCtrl', ['$scope', '$http', '$timeout', '$location', '$anchorScroll',
function($scope, $http, $timeout, $location, $anchorScroll) {
if(window.location.hash) {
$timeout(function() {
console.log('TEST');
// $location.hash('jobs');
// $location.hash('jobs');
$anchorScroll();
}, 1000);
};
}]);
此设置似乎有效,因为TEST仅在单击"作业"按钮时出现在控制台中,而不是在用户单击该配置文件时出现.我现在面临的问题是页面开始加载,并且网址栏中的路径更改为 …
我正在使用AngularJS,并希望#hash-fragment在地址栏中处理给定的.但是,这是关键 - 我不会使用散列片段来编码路径.但似乎AngularJS坚持以这种方式解释它.
例如,html5Mode禁用时:
http://my.domain.com#my-hashhttp://my.domain.com/#/my-hash,和$location.hash() 将是空的.当html5Mode启用了:
http://my.domain.com#my-hashhttp://my.domain.com/my-hash,和$location.hash() 仍然是空的.AngularJS一定在想:"哦,你有html5,让我为你删除那个哈希".多么体贴......
获取任何东西的唯一方法$location.hash()是当URL具有双重哈希时:
http://my.domain.com##my-hash$location.hash()最终等于"my-hash",和$locationProvider.html5Mode(true)从URL中删除了其中一个哈希值.但我真的需要一个简单的单个哈希字符来保持未处理状态.这可能吗？
我们有一个使用Angular的项目,但仅限于UI绑定/ AJAX方面,而不是任何类型的路由或SPA功能.
我们希望能够#section-2在我们选择的CMS中编写的文章中使用锚点链接(),以及使用其他页面的锚点链接(/my-page#section-C),但是Angular #/section-2会将这些链接重写为,这会破坏CMS设置的锚点链接.
无法扩充CMS以修改锚链接的处理方式.
有可能:
hashchange从Angular中删除事件绑定？我看到这个事件附加在源文件中src/ng/browser.js,它处理一些路由和链接重写,但是它在一个闭包内部,所以不能直接访问它(我们从CDN链接到Angular所以不可能修改Angular源代码,加上我们不想维护自己的"自定义"Angular源代码.
设置一个选项或调用一个配置方法,最终禁用Angular的整个路由方面,并防止它重写任何类型的链接？(或者,有没有办法不包括Angular的这部分,但仍保留控制器/ UI绑定/ AJAX功能？)
请注意,我已经尝试过这个:
$locationProvider.html5Mode(true)
但是,它会使网站上的所有其他链接无法运行,因为所有链接都通过Angular进行处理.因此,如果我链接到主页(<a href="/">Home</a>)并单击带有html5modeon的链接,则链接不执行任何操作.
我不是在构建单页应用程序,而是在一个地方使用AngularJS的"传统"站点.我遇到了以下问题(使用1.3.0-beta.6):
标准的工作锚链:
<a href="#foo">Link text</a>
... [page content]
<a id="foo"></a>
<h1>Headline</h1>
[more content]
这很好.现在我在某处介绍一个模板部分:
<script type="text/ng-template" id="test-include.html">
<p>This text is in a separate partial and inlcuded via ng-include.</p>
</script>
通过以下方式调用:
<div ng-include="'test-include.html'"></div>
部分包含正确,但锚链接不再起作用.单击"链接文本"现在将显示的URL更改为/#/foo而不是/#foo页面位置不会更改.
我的理解是使用ng-include隐式告诉Angular我想使用routes系统并覆盖浏览器的本机锚链接行为.我已经看到通过更改我的html锚点链接来解决这个问题的建议#/#foo,但由于其他原因我无法做到这一点.
我不打算使用路由系统 - 我只是想在ng-include不弄乱浏览器行为的情况下使用它.这可能吗？
我的页面内有一个ui-view.单击某个按钮时,将加载ui-view并替换为某些HTML.我希望页面向下滚动到页面的刚刚加载的部分.
这可能吗？提前致谢
这是一个示例布局.假设截面高度大于或等于用户的视口.
+----------+
| Section1 |
+----------+
| Section2 |
+----------+
| Section3 |
+----------+
所有这些部分都放在一个视图中.我想在用户滚动页面时动态更改浏览器URL并到达其中一个部分:首次用户看到http://example.com/#/section1(角度不使用html5模式),然后他向下滚动页面,并且应该看到元素http://example.com/#/section2何时section2在用户的视口中可见.此外,如果用户复制链接,当他打开,即http://example.com/#/section2我需要滚动页面到该部分.
为了检测用户当前查看了哪个部分,我使用angular-inview指令.
现在我通过参数完成了它:
$state.go($state.current, {
section: $scope.activeSectionId // e.g. 'section2'
}, {
notify: false, // do not reload page
location: 'replace' // do not save as new history entry
});
但这种方式并不安静,网址也不友好.此外它有一个错误,当我点击链接与ui-sref时,第一次页面跳转,更改inview部分一段时间并触发上面提到的代码,所以实际上它不根据ui-sref导航.但是下次我点击 - 一切运行良好(这在页面重新加载后发生).
如果有可能,有人可以建议如何做得更好吗？
我有一个构建为单页的站点,所有请求都是使用AJAX创建的.页面就像site.com/#Page或site.com/#Page/Other.
现在,我需要Skip Navigation在网站中实现一个链接,但因为URL开头#我不能使用简单的锚点.有没有办法在不更改所有URL的情况下执行此操作？谢谢.
注意:跳过导航至少做3件事:滚动到页面的那一部分,专注于内容开始的元素(它甚至可以是一个不可聚焦的元素,如H1标题),让屏幕阅读器知道更改.