防止頁面模板改變時routeProvider

Question

鏈接'的href =「＃」'

我已經從JQuery的遷移我的項目Angular.js

我有幾個環節，有針對性，以「＃」，例如在自舉下拉：

<a href="#" class="dropdown-toggle" data-toggle="dropdown">         
    Administrator <b class="caret"></b> 
</a> 
<ul class="dropdown-menu"> 
    <li><a href="info.html">Info</a></li> 
    <li><a href="settings.html">Settings</a></li> 
    <li class="divider"></li> 
    <li> 
     <a id="logout" href="logout.html"> 
     <span class="glyphicon glyphicon-off"></span> Logout 
     </a> 
    </li> 
</ul> 

我嘗試實現頁面的路由具有角routeProvider

$routeProvider.when('/content/chat', { 
    templateUrl: config.indexURL + 'content/chat', 
    controller: 'ChatCtrl' 
}) 
.otherwise({ redirectTo: '/' });; 

頁面不斷變化，當鏈接有針對性地「＃」同時，我想，讓他們不重定向

我有一個解決方案，我們可以改變href屬性javascript:void(0);

href="#" causes location address to change, can we avoid it?

但有這麼多，有針對性地在＃我的網頁（其中許多是由jQuery插件生成）鏈接 ，我不想一個一個改變它。

當routeProvider設置中的鏈接href='#'時，有什麼辦法可以防止頁面改變嗎？

Answer 1

想要的wahat 是允許您點擊#時頁面更改（默認）行爲。您需要重寫代碼以跳轉到舊版#的部分頁面行爲。

爲此，您可以使用Angular的$anchorScroll。下面是一個例子（從他們的網站獲得）

<div id="scrollArea" ng-controller="ScrollController"> 
    <a ng-click="gotoBottom()">Go to bottom</a> 
    <a id="bottom"></a> You're at the bottom! 
</div> 

而且你的控制器：

angular.module('anchorScrollExample', []) 
    .controller('ScrollController', ['$scope', '$location', '$anchorScroll', 
    function ($scope, $location, $anchorScroll) { 
     $scope.gotoBottom = function() { 
     // set the location.hash to the id of 
     // the element you wish to scroll to. 
     $location.hash('bottom'); 

     // call $anchorScroll() 
     $anchorScroll(); 
     }; 
    }]);