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(); 
    } 

})

ためのいくつかの機能を追加します経路を選択する。

EDIT：その作業、ここを参照してください：あなたのためのhttps://jsfiddle.net/326f44xu/

出典

2017-12-15 13:19:35

私の答えがダウン投票された理由はありません。私のアイデアは実用的な解決策であり、サンプルコードも提供しています。私の答えが投票されなかった理由もありません。 –

これは私のために働いた、ありがとう。 –

最善のアプローチは、/home/:sectionのようなルーティングのURLのparamsを使用しています。このようにすれば、他のページからアクセスすることができます。 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（メインコントローラ）

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?のように、オプションのparamsと空のルートを使用することができますが、私はそれを明確にするために/homeを追加しました。 url paramの最後の?はオプションです。

出典

2017-12-21 03:00:37

angularjsルート - 私は角度アンカーとルーティングのミックスのいくつかの種類を作るしようとしています

答えて

関連する問題