itinéraire AngularJS - saut à la section page spécifique sur le lien d'itinéraire

Question

Je suis en train de faire une sorte de mélange entre un point d'ancrage angulaire et le routage ...

J'ai fonctionner dans la page d'accueil, puisque l'ancre les sections sont là, cependant, si je suis dans une autre page, ce n'est pas le cas.

Quelqu'un peut-il me diriger dans la bonne direction sur la façon de le faire correctement, s'il vous plaît?

Here's ce que j'ai jusqu'à présent

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> 

Merci!

Answer 1

Si je vous comprends bien, je pense que vous pourriez résoudre cela avec résolution.

d'abord ajouter une fonction de résolution de votre routage:

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

Dans votre contrôleur passer l'objet détermination et ajouter une fonction pour le défilement

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

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

}) 

Cela devrait faire défiler immédiatement à l'ancre après que vous sélectionner l'itinéraire.

EDIT: Son fonctionnement, voir ici: https://jsfiddle.net/326f44xu/

Answer 2

meilleure approche pour vous utilise le routage params url comme /home/:section. Si vous le faites de cette façon, vous pouvez accéder à partir de n'importe quelle autre page. 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> 

---

** Vous pouvez utiliser la route vide avec option comme params /:section?, mais j'ajouté /home à préciser. Le ? à la fin de url param est de le rendre facultatif.