Question

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

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

有人能指出我正确的方向，如何正确地做到这一点，好吗？

这是我到目前为止所拥有的

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>

谢谢！

Answer 1

如果我理解你的话，我认为你可以解决这个问题。

首先在路由中添加一个解析功能：

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

在你的控制器中传递resolve对象并为滚动添加一些函数

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

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

})

选择路线后，应立即滚动到锚点。

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

Answer 2

最适合您的方法是使用/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>

** 您可以使用空路线和/:section?等可选参数，但我添加了/home以清除它。 url param末尾的?是使其可选。

angularjs route - 跳转到路线链接

2 个答案: