Angular ng-click issues on Safari with IOS 8.3

2019-02-13 18:29发布

问题:

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.

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



回答2:

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.