AngularJs ng-click and ng-touch mobile deviceDecember 16, 2014November 19, 2015admin
AngularJs ng-click and ng-touch mobile device

Recently I came across an issue while working on a mobile app written in AngularJS. Adding ng-touch in my application makes some html behavior not to work properly. There was a weird behavior that accordion was not working on touch phone devices while it was working perfect for desktop.

After some googling what I did was to create another directive that simulates a click event to replace ngTouch’s ng-click version for that specific problem.

I am sharing this with you all for reference if any one encounters a similar problem so they have some solution.
DIRECTIVE

.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();
});
};
}
};
});

HTML

<div class=”row”>
<div class=”device-title” basic-click=”checkOpen(device)”>
{{device.deviceName}}
<i class=”pull-right glyphicon” ng-class=”{‘icon-plus ‘: !device.isopen, ‘icon-minus ‘: device.isopen}”></i>
</div>
</div>

I don’t say that is this perfect ,there  could be more better solution than this.  I request you all to keep on sharing similar issues/solutions in this portal.