UI引导复选框和无线电慢在ipad上

Question

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

我能做些什么使它反应更快吗?或者另一个库做同样的事情更可靠?

---

编辑:演示…和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指令挂钩。所以…这是一个小的janky，但如果你使用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来避免移动浏览器延迟。

---

还要检查一下:香草ui-bootstrap演示似乎比你的快，因为它的样式方式。