angularjs路线-跳至路线链接上的特定页面部分 [英] angularjs route - jump to specific page section on route link
问题描述
我正在尝试在Angular锚点和路径之间进行某种混合...
I am trying to make some kind of a mix between an Angular anchor and routing...
我确实可以在主页上使用它,因为锚点位于其中,但是,如果我在另一个页面中,则不会.
I do have it working in the home page, since the anchor sections are there, however, if I am in another page, it does not.
请问有人可以向我指出正确的方法吗?
Can anyone point me in the right direction on how to do it correctly, please?
这是我到目前为止所拥有的
Here´s what I have so far
freddoApp.config(function($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home/home.html',
controller : 'mainController'
})
// route for the productos page
.when('/productos', {
templateUrl : 'pages/home/home.html',
controller : 'mainController'
})
// route for the unico page
.when('/unico', {
templateUrl : 'pages/home/home.html',
controller : 'mainController'
})
// route for the sabores page
.when('/sabores', {
templateUrl : 'pages/home/home.html',
controller : 'mainController'
})
// route for the locales page
.when('/locales', {
templateUrl : 'pages/locales/locales.html',
controller : 'storeController'
})
// route for the servicios page
.when('/servicios', {
templateUrl : 'pages/servicios/servicios.html',
controller : 'servicesController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact/contact.html',
controller : 'contactController'
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
});
/............................./
/............................./
freddoApp.controller('mainController', function($scope, $location, $anchorScroll) {
$scope.scrollTo = function(id) {
$location.hash(id);
$anchorScroll();
};
/............................./
/............................./
(HTML)
<div id="freedo-nav-bar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a ng-click="scrollTo('productos')">Productos</a></li>
<li><a ng-click="scrollTo('unico')"> Freddo Único</a></li>
<li><a ng-click="scrollTo('sabores')"> Sabores</a></li>
<li><a href="#locales"> Locales</a></li>
<li><a href="#servicios"> Servicios</a></li>
<li><a href="#about"> Nosotros</a></li>
<li><a href="#contact"> Contacto</a></li>
</ul>
</div>
谢谢!
推荐答案
如果我理解正确,我认为您可以通过解决解决问题.
If i understand you right, i think you could solve this with resolve.
首先将解析功能添加到您的路由中:
First add a resolve function to your routing:
.when('productos/', {
templateUrl : 'pages/home/home.html',
controller : 'mainController',
resolve: {
anchorname: function() { {
// anchor name
return 'productos'
}
}
})
在您的控制器中传递resolve对象,并添加一些用于滚动的功能
In your controller pass the resolve object and add some function for the scrolling
freddoApp.controller('mainController', function($scope, $location, $anchorScroll, anchorname) {
if(anchorname){
$location.hash(anchorname);
$anchorScroll();
}
})
选择路线后,应立即滚动到锚点.
This should immediately scroll to the anchor after you selecting the route.
它的工作原理,请参见此处: https://jsfiddle.net/326f44xu/
Its working, see here: https://jsfiddle.net/326f44xu/
这篇关于angularjs路线-跳至路线链接上的特定页面部分的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!