Блог

Я тестирую веб-приложение на iPad. Все отлично работает на рабочем столе и даже на desktop touch (компьютер с Windows 8 с включенным сенсорным экраном), но когда я добираюсь до iPad, событие касания не срабатывает постоянно. Он срабатывает периодически, но не всегда. Иногда ng-click вообще не работает. Вот код:

Модели:

 $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
}];
 

Вид:

 <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>
 

Есть некоторые функции, которые должны запускаться при нажатии на ярлык / ввод «bbLabel» .. Но ng-click срабатывает только при двух или трех нажатиях на ярлык. Это действительно странно, и я в тупике. Есть ли какие-либо проблемы с тем, как реализованы переключатели ввода? Какие-либо проблемы между ng-model / ng-checked / ng-value / ng-click?

Я использую angular-touch и fastclick.js . Является ли это проблемой, связанной с сочетанием fastclick.js и угловатый штрих? Эта проблема, похоже, возникает только для этого конкретного модуля, так как touch отлично работает для остальных модулей…

Ok нашел проблему и решение. На настольных компьютерах браузеры отображают метку как ту же область, что и переключатель, но в мобильном Safari допустимой считается только фактическая область переключателя ввода. Я решил эту проблему

 <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> 
 

Добавив функцию jQuery, чтобы вручную запускать щелчок ввода при нажатии на ярлык.

 $scope.selectBuyParam = function(event){
    var clickTarget = $(event.target).parents('.bbSelectOpt').children('input.css-checkbox');
    $timeout(function() {
    angular.element(clickTarget).triggerHandler('click');
  }, 100);
  };