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.

Dede

Answer 1

I fixed it in the end.

The problem was in the //Do something... And then: part of the function. At some point along the way, that function saves some data to the browser local storage.

My boss was using private browsing on safari, and apparently when using private browsing on safari, the browser wont save and data on the local storage and it throws an exception and kills the code.

Well, thanks any way.

Dede

Answer 2

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()"

Cruck

Thanks. I'll try it as soon as I can and let you know if it worked. – Dede

Found the solution. It wasn't that. Thanks any way! – Dede

This one worked for me, thanks. @Cruck do you have a link to the known issue description or something like that? – Dare

Brilliant ! I had a webpage where static ng-clicks worked fine, but dynamically created (using an ng-repeat) DOM elements containing an ng-click just wouldn't trigger the click event, when the page was viewed on a device. Using this Directive instead solved my issue - thank you ! – Assyriology

This fixed an issue that I had on iOS, thanks! Same problem as @MikeGledhill – Sutler