Open AngularUI Bootstrap Typeahead가 컨트롤러를 통해 결과를 일치시킵니다.

Question

컨트롤러의 입력 선 입력 텍스트 상자에서 일치하는 결과를 여는 데 여유가 있습니까?

는

사용 사례 :

• 사용자가 페이지 https://example.com/search/searchText
• 컨트롤러 간다
• 트리거 제어부
에서 선행 입력 결과를 나타내는 초기에 입력 된 텍스트에 "검색 텍스트"(NG 모델)을 설정

필자는 입력 텍스트 상자에 입력하는 동안 분명히 선견 결과를 얻는 것처럼 보일 수 있습니다.

Answer 1

나는 두 가지 방법으로 작동하지만 모두 ui-bootstrap을 변경해야합니다. 내가 끌어 오기 요청을 만들 수 있지만 내 특정 유스 케이스가 일반적인 것인지 확실하지 않은 것 같습니다.

1) 사용자 지정 지시문을 호출하고 UibTypeaheadController.scheduleSearchWithTimeout 입력 요소를 포커스하는 방법.

지침 : UI - 부트 스트랩에

.directive("showSearchResultsOnFocus", function($stateParams) { 
return { 
    require: ['uibTypeahead', 'ngModel'], 
    link: function (scope, element, attr, ctrls) { 
     var typeaheadCtrl = ctrls[0]; 
     var modelCtrl = ctrls[1]; 

     element.bind('focus', function() { 
      if (!$stateParams.search || !modelCtrl.$viewValue) return; 
      typeaheadCtrl.exportScheduleSearchWithTimeout(modelCtrl.$viewValue); 
     }); 
    } 
} 

업데이트 :

this.exportScheduleSearchWithTimeout = function(inputValue) { 
    return scheduleSearchWithTimeout(inputValue); 
}; 

나쁜 :이 컨트롤러의 방법 대중을 필요로한다. 사용할 수있는 방법은 init이며 범위는 분리되어 있습니다. 외부 컨트롤러에서 전화 할 필요가 없습니다.

2) 초점 기본값 및 표시 결과를 설정 할 수 있도록 새로운 선행 입력 속성을 추가 UI - 부트 스트랩에

이

업데이트 :

var isAllowedDefaultOnFocus = originalScope.$eval(attrs.typeaheadAllowDefaultOnFocus) !== false; 
originalScope.$watch(attrs.typeaheadAllowedDefaultOnFocus, function (newVal) { 
    isAllowedDefaultOnFocus = newVal !== false; 
}); 

element.bind('focus', function (evt) { 
    hasFocus = true; 
    // this was line before: if (minLength === 0 && !modelCtrl.$viewValue) { 
    if ((minLength === 0 && !modelCtrl.$viewValue) || isAllowedDefaultOnFocus) { 
    $timeout(function() { 
     getMatchesAsync(modelCtrl.$viewValue, evt); 
    }, 0); 
    } 
}); 

나쁜 : UI - 부트 스트랩 할 수 있지만, 변화를 풀 요청 아마도 일반적인 사용 기능이 아닙니다. 여기에 홍보를 제출 : https://github.com/angular-ui/bootstrap/pull/6353 합병 될지 여부는 모르지만 그 전까지는 포크를 사용하고 있는지 확실하지 않습니다.

다른 제안 사항이 있으십니까?

버전 각도 : 1.5.8, UIBS : 2.2.0, 부트 스트랩 : 3.3.7