#javascript #html #angularjs #twitter-bootstrap #angular-ui
#javascript #HTML #angularjs #twitter-bootstrap #angular-пользовательский интерфейс
Вопрос:
Попытка реализовать флажок и переключатели из http://angular-ui.github.io/bootstrap / но реакция происходит очень медленно (около секунды).
Могу ли я что-нибудь сделать, чтобы заставить его реагировать быстрее? Или другая библиотека, которая делает то же самое более надежно?
РЕДАКТИРОВАТЬ: демонстрация… и источник jsFiddle
Демонстрационный загрузчик загружает пользовательский интерфейс начальной загрузки и 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);
});
}
Комментарии:
1. Вы установили окно просмотра? Это похоже на проблему с задержкой касания на 300 мс.
2. Используете ли вы ngTouch, у которого есть собственная реализация fastclick labs.ft.com/articles/ft-fastclick и уменьшит ли эту задержку в 300 мс?
3. @APAD1 это может быть проблема с задержкой в 300 мс, но, честно говоря, это больше похоже на вторую задержку, чем на 300 мс.
4. @JonSamwell У меня проблема в моем собственном приложении, но я также сталкиваюсь с их собственным веб-сайтом, поэтому ожидал, что это не проблема с моей собственной реализацией. Возможно, я создам jsfiddle для демонстрации проблемы и попытаюсь исправить ее там.
5. Добавьте ссылку сюда, и я тоже посмотрю. Вы уверены, что при нажатии / касании флажка выполняется не просто действительно большой цикл просмотра?
Ответ №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, чтобы избежать задержки мобильного браузера.
Комментарии:
1. Решение 3 отлично сработало. Мне никогда не приходило в голову, что fastclick придирчив к элементам, с которыми он работает, но на самом деле это имеет большой смысл.