angularjs 路由 - 跳转到路由链接上的特定页面部分 [英] angularjs route - jump to specific page section on route link

问题描述

我正在尝试在 Angular 锚点和路由之间进行某种混合...

我确实在主页中使用了它，因为锚部分在那里，但是，如果我在另一个页面中，它就没有.

有人能指点我正确的方向吗?

这是我目前所拥有的

freddoApp.config(function($routeProvider, $locationProvider) {$routeProvider//主页的路由.什么时候('/'， {templateUrl : 'pages/home/home.html',控制器:'主控制器'})//产品页面的路由.when('/productos', {templateUrl : 'pages/home/home.html',控制器:'主控制器'})//unico 页面的路由.when('/unico', {templateUrl : 'pages/home/home.html',控制器:'主控制器'})//sabores 页面的路由.when('/sabores', {templateUrl : 'pages/home/home.html',控制器:'主控制器'})//区域设置页面的路由.when('/locales', {templateUrl : 'pages/locales/locales.html',控制器:'商店控制器'})//服务页面的路由.when('/services', {templateUrl : 'pages/servicios/servicios.html',控制器:'服务控制器'})//关于页面的路由.when('/关于', {templateUrl : 'pages/about/about.html',控制器:'关于控制器'})//联系页面的路由.when('/联系', {templateUrl : 'pages/contact/contact.html',控制器:'contactController'});//使用 HTML5 历史 API$locationProvider.html5Mode(true);});

/................................/

 freddoApp.controller('mainController', function($scope, $location, $anchorScroll) {$scope.scrollTo = function(id) {$location.hash(id);$anchorScroll();};

/................................/

(HTML)

<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">语言环境</a></li><li><a href="#servicios">服务</a></li><li><a href="#about">Nosotros</a></li><li><a href="#contact">接触

谢谢！

解决方案

如果我理解正确，我想你可以用 resolve 来解决这个问题.

首先给你的路由添加一个解析函数:

.when('productos/', {templateUrl : 'pages/home/home.html',控制器:'主控制器'，解决: {锚点名称:函数(){ {//锚点名称返回产品"}}})

在您的控制器中传递解析对象并添加一些滚动功能

freddoApp.controller('mainController', function($scope, $location, $anchorScroll, anchorname) {如果(锚名){$location.hash(anchorname);$anchorScroll();}})

选择路线后，这应该立即滚动到锚点.

它的工作原理，请参见此处:https://jsfiddle.net/326f44xu/

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>

Thanks!

解决方案

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'
        }
    }
})

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.

EDIT: Its working, see here: https://jsfiddle.net/326f44xu/

这篇关于angularjs 路由 - 跳转到路由链接上的特定页面部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！