CODEWITHSUNDEEP
iosiphoneangularjssafariangularjs-ng-click
Gal Silberman
Gal Silberman

Reputation: 3904

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.

Upvotes: 6

Views: 11332

Answers (2)

Gal Silberman
Gal Silberman

Reputation: 3904

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.

Upvotes: 8

Iamisti
Iamisti

Reputation: 1710

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

Upvotes: 22

Related Questions