Open AngularUI Bootstrap Typeahead 通过控制器匹配结果 [英] Open AngularUI Bootstrap Typeahead Matches Results via Controller
问题描述
无论如何,是否可以触发在控制器的预输入文本框中打开匹配结果?
Is there anyway to trigger opening the match results on a typeahead input text box from the controller?
用例:
- 用户转到 https://example.com/search/searchText
- 页面控制器在初始化时将输入文本设置为searchText"(ng-model)
- 触发器显示来自控制器的预输入结果
我似乎只能在输入文本框中输入时获得预先输入的结果.
I can only seem to get the typeahead results, obviously, while typing in the input text box.
推荐答案
我让它以几种方式工作,但都需要对 ui-bootstrap 进行更改.我想我可以创建一个拉取请求,但不确定我的特定用例是否是常见用例.
I got it to work in a couple ways, but both require changes to ui-bootstrap. I suppose I could create a pull request but not sure if my particular use case is a common one.
1) 自定义指令并在输入元素的焦点上调用 UibTypeaheadController.scheduleSearchWithTimeout
方法.
1) Custom directive and calling UibTypeaheadController.scheduleSearchWithTimeout
method on focus of input element.
指令:
.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);
});
}
}
更新到 ui-bootstrap:
Update to ui-bootstrap:
this.exportScheduleSearchWithTimeout = function(inputValue) {
return scheduleSearchWithTimeout(inputValue);
};
不好: 需要在控制器上公开方法.唯一可用的方法是 init
方法并且作用域是隔离的.不打算从外部控制器调用.
Bad: Requires making the method public on controller. Only method available is the init
method and scope is isolated. Not meant to call from outside controller.
2) 添加新的 typeahead 属性以允许设置默认值并在焦点上显示结果:
2) Add new typeahead attribute to allow setting default value and show results on focus:
更新到 ui-bootstrap:
Update to ui-bootstrap:
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-bootstrap 拉取请求,但更改可能不是常用功能.在此处提交 PR:https://github.com/angular-ui/bootstrap/pull/6353 不确定是否会合并,但在此之前使用 fork.
Bad: Pull Request to ui-bootstrap but change perhaps not a common use feature. Submitted a PR here: https://github.com/angular-ui/bootstrap/pull/6353 Not sure if will be merged or not but using fork until then.
还有其他建议吗?
版本角度:1.5.8,UIBS:2.2.0,引导:3.3.7
Versions Angular: 1.5.8, UIBS: 2.2.0, Bootstrap: 3.3.7
这篇关于Open AngularUI Bootstrap Typeahead 通过控制器匹配结果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!