angularjs - Angular JS ng-click not responding only on iPad, works fine on Desktop -

angularjs - Angular JS ng-click not responding only on iPad, works fine on Desktop -

i testing web app on ipad. works fine on desktop , on desktop touch (windows 8 machine touch enabled), when ipad, touch event not firing @ times. fires intermittently, not always. ng-click not work @ all. here code:

models:

$rootscope["bboxprops"] = [{ "btype": "sbusinesstype", "id": "sbusinesstype", "title": "business", "options": [ { "optid": "nyi", "name": "nyi", "isselected": false, "isdisabled": false, "isinvalid": false }, { "optid": "local", "name": "local", "isselected": false, "isdisabled": false, "isinvalid": false } ], "disabled": false, "invalid": false }, { "btype": "smediabuy", "id": "smediabuy", "title": "buy type", "options": [ { "optid": "audience", "name": "audience", "isselected": false, "isdisabled": false, "isinvalid": false }, { "optid": "spot", "name": "spot", "isselected": false, "isdisabled": false, "isinvalid": false } ], "disabled": true, "invalid": false }, { "btype": "smediadelivery", "id": "smediadelivery", "title": "media type", "options": [ { "optid": "optimizedlinear", "name": "optimized linear", "isselected": false, "isdisabled": false, "isinvalid": false }, { "optid": "addressable", "name": "addressable", "isselected": false, "isdisabled": false, "isinvalid": false } ], "disabled": true, "invalid": false }];

view:

<div class="buybox" id="{{bbox.id}}" ng-repeat="bbox in bboxprops" ng-class="{disabledbb: bbox.disabled, invalidbb: bbox.invalid}"> <div class="bbtitle"><h3>{{bbox.title | uppercase}}</h3></div> <div class="bbselect"> <div class="bbselecttop bbselectopt"> <input type="radio" name="{{bbox.id}}" id="{{bbox.options[0].optid}}" class="css-checkbox" ng-click="pmflow(state,this,bbox.options[0])" ng-checked="bbox.options[0].isselected==true" ng-model="bbox.options[0].isselected" ng-disabled="bbox.options[0].isdisabled" ng-class="{invalidbbopt: bbox.options[0].isinvalid}" ng-value="true"/> <label for="{{bbox.options[0].optid}}" class="bblabel"><div class="bblabeltext">{{bbox.options[0].name}}</div></label> </div> <div class="buyor">or</div> <div class="bbselectbottom bbselectopt"> <input type="radio" name="{{bbox.id}}" id="{{bbox.options[1].optid}}" class="css-checkbox" ng-click="pmflow(state,this,bbox.options[1])" ng-checked="bbox.options[1].isselected==true" ng-model="bbox.options[1].isselected" ng-disabled="bbox.options[1].isdisabled" ng-class="{invalidbbopt: bbox.options[1].isinvalid}" ng-value="true"/> <label for="{{bbox.options[1].optid}}" class="bblabel"><div class="bblabeltext">{{bbox.options[1].name}}</div></label> </div> </div> </div>

there functions supposed run upon tap of label/input "bblabel" .. ng-click fires on 2 or 3 taps of label. odd , i'm stumped. there issue way input radio buttons implemented? issues between ng-model/ng-checked/ng-value/ng-click?

i using angular-touch , fastclick.js. issue combination of fastclick.js , angular touch? issue seems coming particular module, touch works fine rest of modules...

ok found issue , solution. on desktops, browsers render label same area radio button, on mobile safari, actual area of input radio button considered valid. resolved issue

<div class="buybox" id="{{bbox.id}}" ng-repeat="bbox in bboxprops" ng-class="{disabledbb: bbox.disabled, invalidbb: bbox.invalid}"> <div class="bbtitle"><h3>{{bbox.title | uppercase}}</h3></div> <div class="bbselect"> <div class="bbselecttop bbselectopt"> <input type="radio" name="{{bbox.id}}" id="{{bbox.options[0].optid}}" class="css-checkbox" ng-click="pmflow(state,this,bbox.options[0])" ng-checked="bbox.options[0].isselected==true" ng-model="bbox.options[0].isselected" ng-disabled="bbox.options[0].isdisabled" ng-class="{invalidbbopt: bbox.options[0].isinvalid}" ng-value="true"/> <label for="{{bbox.options[0].optid}}" class="bblabel" **ng-click="selectbuyparam($event)"**><div class="bblabeltext">{{bbox.options[0].name}}</div></label> </div> <div class="buyor">or</div> <div class="bbselectbottom bbselectopt"> <input type="radio" name="{{bbox.id}}" id="{{bbox.options[1].optid}}" class="css-checkbox" ng-click="pmflow(state,this,bbox.options[1])" ng-checked="bbox.options[1].isselected==true" ng-model="bbox.options[1].isselected" ng-disabled="bbox.options[1].isdisabled" ng-class="{invalidbbopt: bbox.options[1].isinvalid}" ng-value="true"/> <label for="{{bbox.options[1].optid}}" class="bblabel" **ng-click="selectbuyparam($event)"**><div class="bblabeltext">{{bbox.options[1].name}}</div></label> </div> </div> </div>

by adding jquery function manually trigger click of input upon click of label.

$scope.selectbuyparam = function(event){ var clicktarget = $(event.target).parents('.bbselectopt').children('input.css-checkbox'); $timeout(function() { angular.element(clicktarget).triggerhandler('click'); }, 100); };

angularjs radio-button angularjs-ng-click