0

我一直在将我的项目从 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>

我尝试使用 angular routeProvider 实现页面路由

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

当链接指向“#”时页面不断变化，同时我想让它们不被重定向

我有一个解决方案，我们可以将 href 属性更改为javascript:void(0);

href="#" 导致位置地址发生变化，我们可以避免吗？

但是我的页面中有很多指向#的链接（其中许多是由JQuery插件生成的），我不想一一更改。

href='#'当routeProvider 设置中的链接时，有什么方法可以防止页面更改？

4

1 回答 1

0

你想要的是当你点击一个#. 您需要重写代码以跳转到旧的页面行为的一部分#。

为此，您可以使用 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();
      };
    }]);
于 2014-08-28T06:42:13.673 回答