Как angular ui typeahead trigger при фокусировке

Ответ 1

Я могу подтвердить проблемы, связанные с расширением UX типа head. В то время как решение @ueq работает, у него проблемы с выпуском фокуса/клика. Я предлагаю изменить вещи, в частности как запускать открытый UX.

предлагаемые изменения

• открыть с двойным щелчком - это решает вопрос о выпуске кликов в ответ @ueq
• проверить существующие значения, чтобы не перезаписывать значение - мы не хотим случайно перезаписывать существующие данные при открытии, поэтому сначала проверьте сначала значение недопустимого значения для запуска открытого.
• измените название директивы.... переходите к чему-то более описательному - учитывая, что ui.bootstrap уже изменил свое пространство имен, перемещающееся с 13.x до 14.x, просто имеет смысл идти с вашим собственным именем. Поскольку директивы могут представлять как UI, так и UX, имеет смысл называть вашу директиву тем, что другие разработчики могут позже отслеживать легче.

почему

При работе с typeahead у людей есть определенные ожидания UX. Нажатие на ввод и наличие чего-то всплывающего окна могут быть несколько резкими и неправильными. Один щелчок или вкладка-фокус на вход традиционно ничего не делает, кроме как готовить вход для взаимодействия с клавиатурой. Двойной щелчок обычно предполагает, что произойдет нечто большее (например, дважды щелкните файл и закройте диалоговое окно выбора по сравнению с одним щелчком мыши, чтобы выбрать, затем нажмите "ОК", чтобы закрыть).

В программировании мы часто пытаемся использовать разделение проблем парадигмы на наш код. Но я думаю, что это может быть применено и к этому конкретному UX и UX в целом. Пусть однократное нажатие и вкладка делают то, что они делали в течение многих лет, и используют двойной щелчок, чтобы развернуть UX типа headhead.

plunker - http://plnkr.co/edit/GGl6X4klzVLKLX62Itbh?p=preview

.directive('typeaheadClickOpen', function($parse, $timeout) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function($scope, elem, attrs) {
            triggerFunc = function(evt) {
                var ctrl = elem.controller('ngModel'),
                    prev = ctrl.$modelValue || '';
                if (prev) {
                    ctrl.$setViewValue('');
                    $timeout(function() {
                        ctrl.$setViewValue(prev);
                    });
                } else {
                    ctrl.$setViewValue(' ');
                }
            }
            elem.bind('dblclick', triggerFunc);
        }
    }
})

Ответ 2

Привет, у меня была такая же проблема, и с это обсуждение github Я смог понять: установить директиву, которая вызывает $setViewValue как

.directive('typeahead', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attr, ctrl) {
            element.bind('click', function () {
                ctrl.$setViewValue(' ' );
            });
            element.bind('blur', function () {
                ctrl.$setViewValue('');
            });
        }
    };
});

и добавьте его в свой input:

<input type="text" [...] typeahead>

Результат (я создал plkr: http://plnkr.co/edit/Si6tFK2AammZy1HqEQzA):

Надеюсь, что помогает:)

Ответ 3

Используйте typeahead-min-length = "0", если поддерживается вашей версией angular -ui. В противном случае это поможет вам:

directive('typeaheadOpenOnFocus', function ($timeout) {
       return {
        require: 'ngModel',
        link: function (scope, element, attr, ctrl) {
            element.bind('click', function () {
                var vv = ctrl.$viewValue;
                ctrl.$setViewValue(vv ? vv+' ': ' ' );
                $timeout(function(){ctrl.$setViewValue(vv ? vv : '');},10)
            });
        }
    };
})

и добавьте typeahead-open-on-focus как атрибут к вашему элементу ввода.

Это откроет typeahead onfocus, если оно уже имеет значение. И он автоматически возвращает значение view.