포커스할 때 각도 ui type ahead 트리거하는 방법

포커스할 때 각도 ui type ahead 트리거하는 방법

저는 앞에 각의 타입을 사용하고 있습니다.입력 후가 아니라 입력 상자에 포커스를 맞출 때 팝업 항목을 트리거하려면 어떻게 해야 합니까?

나는 미리 입력하는 타입의 UX를 확장하는 것과 관련된 문제를 증명할 수 있습니다.@ueq의 솔루션이 작동하는 동안 포커스/클릭을 해제하는 데 문제가 있습니다.저는 여러분이 오픈 UX를 어떻게 작동시키는지와 같은 것들을 바꿀 것을 제안합니다.

제안된 변경 사항

• 더블 클릭 시 open on double click - 이것은 @ueq의 답변에서 클릭-releasing 문제를 해결합니다.
• 값을 덮어쓰지 않도록 기존 값을 확인합니다. 열 때 실수로 기존 데이터를 덮어쓰지 않으려면 먼저 확인한 다음 valid가 아닌 값으로 설정하여 열림을 트리거합니다.
• 지시의 이름을 바꾸다... 좀 더 설명적인 것으로 가십시오. ui.bootstrap이 이미 13.x에서 14.x로 네임스페이스를 변경한 것을 고려하면 자신의 이름으로 가는 것이 합리적입니다.지시어는 UI 및/또는 UX를 모두 나타낼 수 있으므로 나중에 다른 개발자가 더 쉽게 추적할 수 있는 것에 지시어의 이름을 지정하는 것이 타당합니다.

왜죠

앞에 있는 타입으로 작업할 때, 사람들은 UX에 대한 특정한 기대를 가지고 있습니다.입력을 클릭하고 팝업을 표시하는 것은 다소 방해가 되고 잘못 지시될 수 있습니다.한 번의 클릭이나 탭 포커스로 입력을 입력하면 키보드 상호 작용을 위해 입력을 준비하는 것 외에는 아무 것도 할 수 없습니다.두 번 클릭하면 일반적으로 더 많은 일이 일어날 것이라는 예상이 들어 있습니다(예: 선택 대화 상자에서 파일을 두 번 클릭하고 닫기 대 선택하려면 한 번 클릭하고 "확인"을 클릭하여 닫기).

프로그래밍에서 우리는 종종 코드에 관심사 분리 패러다임을 사용하려고 합니다.하지만 이것은 이 특정 UX와 UX 일반에도 적용될 수 있다고 생각합니다.한 번의 클릭과 탭 포커스로 몇 년 동안 해온 일을 수행하고 더블 클릭을 활용하여 미리 입력할 수 있는 유형의 UX를 확장할 수 있습니다.

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);
        }
    }
})

안녕하세요 저는 같은 문제가 있었고 이 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) :

도움이 되길 바라요 :)

angular-ui 버전에서 지원되는 경우 ahead-min-length="0"을 입력합니다.그렇지 않으면 다음과 같은 도움이 됩니다.

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)
            });
        }
    };
})

입력 요소에 미리 열기식 초점 유형을 속성으로 추가합니다.

값이 이미 있는 경우 미리 입력해 둔 유형이 포커스로 열립니다.그리고 뷰 값을 자동으로 되돌립니다.

보엠의 대답에서 영감을 얻었습니다.

뷰 렌더링 문제를 방지하기 위해 시도해 볼 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/20879773/how-angular-ui-typeahead-trigger-when-focus