angularjs - Bootstrap 3 Angular modal popup not processing touch events on mobile devices -
bootstrap3 , angular supposed play nicely together.... , bootstrap being "mobile first" never thought i'd run this, have.
i have modal window being popped button (via standard modalservice), works fine across desktop browsers i've tested (ie 10, 11, edge, chrome, opera, safari, , firefox) fails on mobile. every mobile have access (ios chrome, ios safari, android internet browser, , android chrome).
it displays same failure on chrome emulation of mobile browsers.
in cases on mobile, radio buttons , checkbox fail recognize tap/click event.. unless hold long long time (much longer 300ms i've seen mentioned in articles). in couple mobile browsers capture - angular actions result change not being executed on mobile clients (but on desktops)
<input type="radio" class="form-control" ng-model="modaloptions.rscope.selecteditem" name="purchase" ng-value="selecteditem=item" ngclick="modaloptions.rscope.selecteditem=item">
ngtouch being added page facilitate faster ngclick event.
i have stripped out relevant code , created plunk showing : http://plnkr.co/edit/izv6jrnhhhrwako2jj06
is function of how radio buttons defined? , if so, why checkbox displaying same behaviour (i know doesnt have ngclick on - behaviour same):
<input type="checkbox" class="form-control" width="20px" ng-model="modaloptions.rscope.xgiftfor" />
i no errors indicating ngtouch module not being loaded...
the 1 thing bothers me... page ngclick states:
a more powerful replacement default ngclick designed used on touchscreen devices. mobile browsers wait 300ms after tap-and- release before sending click event. version handles them immediately, , prevents following click event propagating.
is ngtouch preventing angular continuing propagate updates on form? click event have other consequences modaloption.rscope.selecteditem update occurs.
or stretching find reason behaviour?
[edit]
i have updated plunk display same data set (code modified due scope) on main page, , behaviour on modal not present on main page. run in fav desktop browser , it's on main page - open modal, , doesn't work.
http://embed.plnkr.co/wnxarmu9vuvjdwnvuev1
does have clue modal introducing interfering processing (and how work around it)?
i running exact problem. unfortunately, discovered ngclick directive deprecated no workaround.
deprecation notice: beginning angular 1.5, directive deprecated , default disabled. directive receive no further support , might removed future releases. if need directive, can enable $touchprovider#ngclickoverrideenabled function. recommend migrate fastclick. learn more 300ms delay, telerik article gives overview.
Comments
Post a Comment