ng-click on firing on mobile or tablet devices

Question

On page load i have a controller that calls a service and then binds the returned data to some $scope.objects:

app.controller("MainController", function($scope, $http, serviceGetData) {

    serviceGetData.getData(function(data) {
        $scope.LoginCount = data.LoginCount;
        $scope.ProductInfo = data.ProductInfo;
        $scope.ProfileInfo = data.ProfileInfo;

        // Delayed binding
        $scope.OrderHistory  = { History: [] };
    }

    $scope.populateModel = function(model, values) {
        var isArray = $.isArray(values);

        $.each(values, function(key, value) {

            if (isArray) {
                key = this.key;
               value = this.value;
            }

            if (model[key] !== value) {
                model[key] = value;
            }

        });
    };
}

And in my HTML, i try to bind $scope.OrderHistory by:

<h1><a href="#" ng-click="populateModel(OrderHistory  , { History: OrderEntries })" >View order details</a></h1>

This is fine when viewing on laptops/desktops, but not working in tablet and mobile devices e.g. iphone/ipad

Valedictorian

Answer 1

Try to add the ngTouch. From documentation:

A more powerful replacement for the default ngClick designed to be used on touchscreen devices. Most mobile browsers wait about 300ms after a tap-and-release before sending the click event. This version handles them immediately, and then prevents the following click event from propagating.

Requires the ngTouch module to be installed.

Hypomania

I read about ngTouch, i would prefer not to have to import another library in my project. – Valedictorian

@OamPsy, it's not another library, just external module for angular – Hypomania

Ah i see, are there any how-to's or example projects around? – Valedictorian

Imported ngTouch into my project and seems to have resolved the issue. – Valedictorian

Answer 2

I had the same problem.

I tried adding the ngTouch library and dependency, but was still having a problem.

My static <div> elements which contained an ng-click worked fine, but the div's which were created dynamically (in an ng-repeat on the same webpage) which contained an ng-click didn't work. Tapping on them just didn't do anything.

This happened on my iPhone 6, my iPad and in Google Chrome when I asked to view my webpage on any of the device types. When I viewed the same webpage in IE or regular Chrome, all of the ng-clicks worked fine.

The solution was to use the ngMobileClick directive described here and changing my ng-click's to ng-mobile-click.

After doing that, my dynamically created click events did get triggered normally when I tapped on them on a device.

Very odd.

Neurosis

Answer 3

Had a similar issue where the ng-click inside of a ng-repeat would not trigger. I fixed this by adding $event.stopPropagation()

Ex:

<li ng-repeat="option in $scope.options">
   <span><a ng-click="trigger(); $event.stopPropagation()"></a></span>
</li>

Solicit