我知道如何将变量传递给 Ui-router 中的链接。
<a ui-sref="Category({ SCID: sc.scid })" ui-sref-active="active" >{{ sc.scname }}</a>
然后在路由中处理。
.state('Category', {
templateUrl: "templates/Products.html",
url: '/Category/:SCID/',
controller: 'ProductsController as pc'
})
现在我想转到该页面的特定部分。假设部分以 id=123 开头。
<section id="123"> reach here directly on clicking link</section>
其他一些用户也在这里问过这个问题。 AngularJS ui.router change page and go to specific section
但那没有任何答案。
谁能帮我修改 URL 和 .state。
最佳答案
您正在寻找$anchorScroll()
基本上,你需要做的就是像往常一样设置你的路线,像这样传递滚动参数:
url: '/first/:scrollTo',
只需添加以下内容,注入(inject) $anchorScroll
,它就会将您滚动到具有在 $location.hash()
app.run(function($rootScope, $location, $anchorScroll, $stateParams, $timeout) {
$rootScope.$on('$stateChangeSuccess', function(newRoute, oldRoute) {
$timeout(function() {
$location.hash($stateParams.scrollTo);
$anchorScroll()
}, 100)
});
})
然后,在您的 html 中,链接应如下所示:
<a href ui-sref="first({scrollTo: 'foo'})">First / Foo</a>
这是一个plunker
或者,您可以在您的状态中创建一个 onEnter:
函数来管理这个:
.state('first', {
url: '/first/:scrollTo',
controller: 'FirstCtrl',
templateUrl: 'first.html',
onEnter: function ($location, $stateParams, $anchorScroll, $timeout) {
$timeout(function() {
$location.hash($stateParams.scrollTo);
$anchorScroll()
}, 100)
}
})
让状态更简单:
.state('first', {
url: '/first/:scrollTo',
controller: 'FirstCtrl',
templateUrl: 'first.html',
onEnter: scrollTo
})
var scrollTo = function() {
function ($location, $stateParams, $anchorScroll, $timeout) {
$timeout(function() {
$location.hash($stateParams.scrollTo);
$anchorScroll()
}, 100)
}
};
关于javascript - Angular - ui-router 如何转到页面的特定部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31860015/