Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular ng-click issues on Safari with IOS 8.3

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.

like image 497
Gal Silberman Avatar asked Jan 03 '16 10:01

Gal Silberman


2 Answers

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

like image 127
Iamisti Avatar answered Nov 08 '22 06:11

Iamisti


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.

like image 8
Gal Silberman Avatar answered Nov 08 '22 08:11

Gal Silberman