Angulardart should not make links reload

4
votes

In angularjs you can prohibit to reload a page when using.

<a href="" ng-click="..">text</a>

In angulardart the link is actually navigating to the href. Is that intended?

Goog examples of the angularjs behavior: http://docs.angularjs.org/api/ng.directive:ngHref

<a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)
2
dartangular-dart
I always used the anchor tag without the href/ng-href attribute when I wanted to create a button without route change (in angularJS) and it seems to me like it's working fine also in angularDart... does that meet your behavior requirements? – doodeec
@doodeec that works but it turns the cursor into a text selector instead of a pointer which isn't very ideal – Scotty Waggoner

2 Answers

4
votes

EDIT

<a href="#" ng-click="ctrl.clickHandler($event)">text</a>

. 

import 'dart:html';

// ...

void clickHandler(MouseEvent event) {
  event.preventDefault(); // suppress default click action
  event.stopPropagation();  // 
  //event.stopImmediatePropagation(); // optional

  // do something else
}

old answer

I haven't used it myself yet but AngularDart has the NgHref directive

https://github.com/angular/angular.dart/blob/master/lib/directive/ng_src_boolean.dart#L60

1
votes

Another solution is to enable NgRoutingUsePushState which seems to not interfere with anchor links or ng-click at all. You just have to remove or comment out the following line in your RoutingModule:

//bind(NgRoutingUsePushState, toValue: new NgRoutingUsePushState.value(false));

To use push state you also have to have your webserver rewrite urls to index.html. It makes running the app on a local dev server a little more complex but I decided to go for it since I want that functionality eventually and because of this bug. An example nginx config is:

location / {
    # try to serve file directly, fallback to rewrite
    try_files $uri @rewriteapp;
}

location @rewriteapp {
    # rewrite all to index.html
    rewrite ^(.+)$ /index.html last;
}

Note: Tested with Angular 0.13.0