Stop Angular routing links inside ng-view

Question

I'm using Angular JS to dynamically load content like so:

HTML

  ...

  <div ng-controller="MainController">
    <div ng-view></div>
  </div>

</html>

Angular

(function(){

  var app = angular.module('app', ['ngRoute', 'ngAnimate']);

  app.config(function($routeProvider) {

    $routeProvider.when('/test', {
      templateUrl : 'views/test.html',
      controller  : 'MainController'
    });

  });

  app.controller('MainController', function($scope){ });

})();

This works as expected. However, inside the file test.html I have some links with the href="#" that need to be handled with javascript to do various things. At the moment, Angular is interpreting them with it's routing method and treats them as links to the homepage. How do I stop this and treat the links the way I want?

Example test.html content:

<a href="#" class="slideLeft">Left</a>
<a href="#" class="slideRight">Right</a>
<p>Test content</p>

In a JS file separate from Angular I tried:

$('.slideLeft').on('click',function(){
  return false;
});

But it doesn't do the return false, it uses the Angular routing.

http://stackoverflow.com/a/1291950/1059101 this could help you. — Jai, Aug 08 '14 at 13:32
You're using jQuery for something that should be handled by Angular. Use an ng-click attribute instead, or better yet, write a slider directive. — superluminary, Aug 08 '14 at 13:35
You want to disable the routing behavior for the entire app? — runTarm, Aug 08 '14 at 13:46

score 2 · Accepted Answer · answered Aug 08 '14 at 13:42

2

You should be using Angular for all your bindings including event bindings. Don't use .on('click'), use ng-click (or .bind if you really need it, but you probably don't).

You can also see from the docs that the <a> directive does nothing if href is empty. Use href="" rather than href="#"

answered Aug 08 '14 at 13:42

Explosion Pills

188,624
52
326
405

Ah very simple. Thanks! – CaribouCode Aug 08 '14 at 13:50

score 1 · Answer 2 · answered Aug 08 '14 at 13:32

1

Use href="javascript:void(0)" in anchor attribute and also you should use ngClick instead of binding element using jQuery.

answered Aug 08 '14 at 13:32

Satpal

132,252
13
159
168

Stop Angular routing links inside ng-view

2 Answers2