0

I've been migrating my projects from JQuery to Angular.js

I have several links that targeted to '#', for example in bootstrap dropdown:

<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>

I try to implement page routing with angular routeProvider

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

The page keep changing when the link targeted to '#' meanwhile I want to keep them not redirected

I've got a solution that we can changes the href attribute to javascript:void(0);

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

but there are so many links that targeted to # in my pages (many of them generated by JQuery plugins) and I don't want to change it one by one.

Is there any way to prevent page changing when the link href='#' in routeProvider settings?

Community
  • 1
  • 1
Willy Lazuardi
  • 1,806
  • 4
  • 26
  • 41

1 Answers1

0

Wahat you want is to allow the page change (the default) behavior when you click on a #. You need to rewrite your code for jumping to a part of the page behavior of the old #.

For that, you may use Angular's $anchorScroll. Here is an example (taken from their site)

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

And your controller is:

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();
      };
    }]);
Kousha
  • 32,871
  • 51
  • 172
  • 296
  • Is there any other way than changing the href='#' to ng-click? Btw, I don't need to scroll down the page. What I realy need is to make the page still on the same place. For example when I click a link href='#', I want to show the bootstrap dropdown. – Willy Lazuardi Aug 28 '14 at 07:36
  • There is always a way. But you are talking about fundamentally changing the way angular routing works. As for opening a bootstrap, you should then use ngClick or even better a directive for that. You should stop thinking the JQuery way and start thinking the Angular way – Kousha Aug 28 '14 at 07:42