ui-sref not working with ng-click (angular-touch) if used without jQuery

[scheffield]

Hi,

I have a hard time removing jQuery from our app. The main problem: a simple link combining ng-click with ui-sref:

<a data-ui-sref="main2" data-ng-click="reportClick()">Link</a>

The result: ng-click fires, ui-sref does not.
This only happens when using angular-touch, without jQuery as a dependency and a mobile browser, or with the emulation of a mobile device in the new chrome 32 (I used an Nexus 4 as emulation target).

A running example: http://jsfiddle.net/scheffield/AEfMm/
To see the effect: http://jsfiddle.net/scheffield/AEfMm/show in a mobile browser

I already did a little research and found out that the event object is broken:

element.bind("click", function(e) {
        var button = e.which || e.button;

        if ((button === 0 || button == 1) && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
          // HACK: This is to allow ng-clicks to be processed before the transition is initiated:
          $timeout(function() {
            scope.$apply(function() {
              $state.go(ref.state, params, { relative: base });
            });
          });
          e.preventDefault();
        }
      });

It is an object containing nothing but two functions implemented as angular.noop.

Any ideas?

[homerjam]

Any news on this?

[homerjam]

Submitted PR #1580

[nateabele]

Any ideas?

Submit a bug against angular-touch?

As I commented in @homerjam's PR, the fact that angular-touch breaks basic event handling isn't something a library like UI Router should have to know or care about.

What you're essentially suggesting is that every Angular module which implements a directive that binds click events needs to know about the ways in which angular-touch is broken. That just does not make any sense to me.

[nateabele]

Did some digging. See angular/angular.js#9872 and angular/angular.js#6001 (which, it looks like you opened, so there you go).

[homerjam]

I turned my PR into a separate module https://github.com/homerjam/angular-ui-sref-fastclick

[nateabele]

@homerjam Nice. Feel free to update the wiki accordingly.

[ofpiyush]

If anyone else reached here like I did because of a completely different issue. Here is the problem and the fix.

Precedence of ng-click and ui-sref has changed between versions.

Before, ui-sref worked before ng-click, so event.preventDefault() on ng-click did not stop ui-sref from firing, now it does.

I am sure this must be somewhere in the log, but this is the first page result so it might help someone.

[LeonardoGentile]

Thanks @ofpiyush, so the solution would be to remove $event.preventDefault() from the handelr fired by ng-click?

[ofpiyush]

yes

[hernancete]

Hi.
@ofpiyush, @LeonardoGentile, where should I remove $event.preventDefault()?
Thanks.

[ofpiyush]

@hernancete the handler of ng-click

If your html looks like

<a ng-click="myClickHandler($event)" ui-sref="my.state">My State</a>

and your controller has

$scope.myClickHandler = function(event) {
    event.preventDefault();
    // Do awesome click-ey things
}

Remove the line

event.preventDefault();

To make it

$scope.myClickHandler = function(event) {
    // Do awesome click-ey things
}

[hernancete]

Thanks a lot for the answer.

[erBhushanPawar]

You don't have to write ng-click, only ui-sref will also work, Use latest or at least 0.3.2 for ui-router

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>