angularjs路线 - 跳转到指定页面部分在路线链接

我试图做出某种角度的锚和路由之间的混合的...angularjs路线 - 跳转到指定页面部分在路线链接

我确实有它的主页上工作，因为锚部分在那里，但是，如果我在另一个页面，它不。

任何人都可以在正确的方向指出我如何正确地做到这一点吗？

Here's什么我到目前为止

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>

谢谢！

来源

2017-08-03 user3074989

如果我理解你是对的，我想你可以解决这个问题。

加上一个决心功能的路由：

.when('productos/', { 
    templateUrl : 'pages/home/home.html', 
    controller : 'mainController', 
    resolve: { 
     anchorname: function() { { 
      // anchor name 
      return 'productos' 
     } 
    } 
})

在你的控制器通过解析对象，并添加了一些功能，用于滚动

freddoApp.controller('mainController', function($scope, $location, $anchorScroll, anchorname) { 

    if(anchorname){ 
     $location.hash(anchorname); 
     $anchorScroll(); 
    } 

})

这应该立即滚动到锚后你选择路线。

编辑：它的工作，在这里看到：https://jsfiddle.net/326f44xu/

来源

2017-12-15 13:19:35

我不明白为什么我的回答是投下来的。我的想法是一个可行的解决方案，我还提供了示例代码。也没有暗示为什么我的答案被拒绝投票。 –

这对我有用，谢谢。 –

你最好的办法是使用路由网址参数像/home/:section。如果你这样做，你可以从任何其他页面访问。 PLUNKER

ROUTE CONFIG

app.config(function($routeProvider, $locationProvider) { 
    $routeProvider 
    .when('/home/:section?', { 
    templateUrl: 'home.html', 
    controller: 'mainController' 
    }) //You don't need to repeat your .when() multiple times 

    $routeProvider.otherwise({ 
    redirectTo: '/home' 
    }); 
});

HOME CTRL（mainController）

app.controller('mainController', function($routeParams, $location, $anchorScroll) { 
    //wrap this on $onInit or activate() function if you want 
    $location.hash($routeParams.section); 
    $anchorScroll(); 
});

home.html做为

<div><!-- HOME --></div> 
<div id="productos"><!-- Productos--></div> 
<div id="unico"><!-- unico--></div> 
<div id="sabores"><!-- sabores--></div>

INDEX.HTML

<body> 
    <div> 
    <a ng-href="#/home">Home</a> 
    <a ng-href="#/home/productos">productos</a> 
    <a ng-href="#/home/unico">Unicos</a> 
    <a ng-href="#/home/sabores">Sabores</a> 
    </div> 

    <div ng-view></div> 
</body>

** 您可以使用空的路线可选PARAMS像/:section?，但我加/home讲清楚。 url param结尾处的?是为了使其可选。

来源

2017-12-21 03:00:37

angularjs路线 - 跳转到指定页面部分在路线链接

回答

相关问题