Angular ng-click issues on Safari with IOS 8.3

Question

This is a weird issue, that is some what hard to generate and explore.

While building a web-app using Angular, my boss found that all the buttons on the app that are using ng-click directive are not working.

Now, this issue only happens on iphone 6 with IOS 8.3 and using the safari browser.

I can say that when was tested on iPhone5 (All versions), iPhone 6 (IOS 9), Safari for windows and all other browsers (Mobile and desktop), ng-click works like a charm.

The app is being build using Angular 1.4.3.

This is the code for the button, as you can see, nothing special about it:

<button class="btn calculate-button" ng-click="onCalculate()">Calculate</button>

And in the controller:

$scope.onCalculate = function () {
     //Do something... And then:
     $state.go('someplace');
};

I tried many changes that were suggested here, including ng-touch, ng-bind, building my own click directive as follows:

.directive('basicClick', function($parse, $rootScope) {
    return {
        compile: function(elem, attr) {
            var fn = $parse(attr.basicClick);
            return function(scope, elem) {
                elem.on('click', function(e) {
                    fn(scope, {$event: e});
                    scope.$apply();
                });
            };
        }
    };
});

Couldn't find any proper solution for the problem.

Thanks.

Answer 1

IOS 8.4.1 Update has a known issue which stop ng-link and ng-click to work.

Using "touchstart click" can possibly solve this issue.

app.directive("ngMobileClick", [function () {
    return function (scope, elem, attrs) {
        elem.bind("touchstart click", function (e) {
            e.preventDefault();
            e.stopPropagation();

            scope.$apply(attrs["ngMobileClick"]);
        });
    }
}])

HTML call: ng-mobile-click="onCalculate()"