javascript - iPad 上的 UI Bootstrap 复选框和 radio 速度较慢

Question

尝试实现 http://angular-ui.github.io/bootstrap/ 中的复选框和单选按钮但是 react 很慢(大约一秒钟)。

我可以做些什么来让它 react 更快吗？或者另一个更可靠地做同样事情的库？

---

编辑:Demo ... 和 jsFiddle source

该演示加载了 bootstrap ui 和 fastclick，它在一个区域而不是另一个区域初始化。您可以看到输入字段的行为符合预期 - 使用 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);
          });
        }
      });
    }
  };
}])

---

方案一

ngTouch Hook 到 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

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

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

---

方案三

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

---

还有check this out: the vanilla ui-bootstrap demo seems faster than yours, because of the way that it's styled .