【问题标题】:Open AngularUI Bootstrap Typeahead Matches Results via Controller通过控制器打开 AngularUI Bootstrap Typeahead 匹配结果
【发布时间】:2016-12-07 20:30:46
【问题描述】:

是否有触发在控制器的预输入文本框中打开匹配结果?

用例:

  • 用户转到https://example.com/search/searchText
  • 页面控制器在初始化时将输入文本设置为“searchText”(ng-model)
  • 触发器显示来自控制器的预输入结果

显然,我似乎只能在输入文本框中输入时获得预输入结果。

【问题讨论】:

    标签: angularjs angular-ui-bootstrap angular-ui bootstrap-typeahead angular-ui-typeahead


    【解决方案1】:

    我让它以多种方式工作,但都需要更改 ui-bootstrap。我想我可以创建一个拉取请求,但不确定我的特定用例是否是常见的。

    1) 自定义指令并在输入元素的焦点上调用UibTypeaheadController.scheduleSearchWithTimeout 方法。

    指令:

    .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:

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

    不好: 需要在控制器上公开方法。唯一可用的方法是 init 方法,并且范围是隔离的。不打算从外部控制器调用。

    2) 添加新的 typeahead 属性以允许设置默认值并在焦点上显示结果:

    更新到 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。

    还有其他建议吗?

    版本 角度:1.5.8,UIBS:2.2.0,引导:3.3.7

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-08-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多