在ipad上的UI Bootstrap复选框和无线电慢

Question

尝试从http://angular-ui.github.io/bootstrap/实现Checkbox和Radio按钮,但是反应非常慢(大约一秒钟).

我能做些什么来让它更快地做出反应？或者另一个更可靠地执行相同操作的库？

---

编辑:演示 ......和jsFiddle来源

演示加载bootstrap ui和fastclick,它在一个区域而不是另一个区域初始化.您可以看到输入字段的行为与预期一致 - 快速单击快速,没有快速.切换按钮在任何地方都表现缓慢.

angular.module('MyApp', ['ui.bootstrap']);

function EditingPageCtrl($scope) {
    $scope.radioModelA = undefined;
    $scope.radioModelB = undefined;
    $scope.fast1 = "this field works quickly, because of fastclick...";
    $scope.fast2 = "this field is slow, because no fastclick";
    $scope.$watch('radioModelA', function (newValue, oldValue) {
        //alert(newValue);    
    });
}

Answer 1

在内部,该btn-radio指令通过JavaScript附加了一个单击处理程序.FastClick不会劫持触摸事件并触发单击,因为FastClick 不支持标签.这是btnRadio源:

angular.module('ui.bootstrap.buttons', [])

  .constant('buttonConfig', {
    activeClass:'active',
    toggleEvent:'click'
  })

  .directive('btnRadio', ['buttonConfig', function (buttonConfig) {
  var activeClass = buttonConfig.activeClass || 'active';
  var toggleEvent = buttonConfig.toggleEvent || 'click';

  return {

    require:'ngModel',
    link:function (scope, element, attrs, ngModelCtrl) {

      var value = scope.$eval(attrs.btnRadio);

      //model -> UI
      scope.$watch(function () {
        return ngModelCtrl.$modelValue;
      }, function (modelValue) {
        if (angular.equals(modelValue, value)){
          element.addClass(activeClass);
        } else {
          element.removeClass(activeClass);
        }
      });

      //ui->model
      element.bind(toggleEvent, function () {
        if (!element.hasClass(activeClass)) {
          scope.$apply(function () {
            ngModelCtrl.$setViewValue(value);
          });
        }
      });
    }
  };
}])

解决方案1

ngTouch挂钩到ng-click指令中.所以...它有点笨拙,但是如果你使用ngTouch而不是FastClick,你可以通过添加一个ng-click属性来提高性能:

 <label ng-model="radioModelA" ng-click="radioModelA=true" btn-radio="true" class="btn btn-silver">Yes</label>
 <label ng-model="radioModelA" ng-click="radioModelA=false" btn-radio="false" class="btn btn-silver">No</label>

解决方案2

更优雅的解决方案是注入btn-radio配置常量并添加触摸事件:

.config(function(buttonConfig) {
    buttonConfig.toggleEvent = 'touchstart click';
});

解决方案3

使用<button>元素而不是<label>s,您可以使用FastClick或ngTouch来避免移动浏览器延迟.

还要看看这个:vanilla ui-bootstrap演示看起来比你的快,因为它的样式.