Angular-bootstrap 预输入 + ng-click/ng-focus答案

【问题标题】：Angular-bootstrap typeahead + ng-click/ng-focusAngular-bootstrap 预输入 + ng-click/ng-focus
【发布时间】：2016-11-27 12:49:47
【问题描述】：

在我的应用中，我使用angular-bootstrap typeahead 组件，这样：

<input type="text" ng-model="selected" placeholder="Start typing to select an object" uib-typeahead="obj as obj.name for obj in objectList | filter:{name:$viewValue}" class="form-control" typeahead-show-hint="true" typeahead-min-length="0" />

一切正常，但用户觉得不方便集中注意力并清除输入字段以再次查看完整的建议列表。所以我想添加一个功能：一旦用户关注它就清除输入字段并再次显示建议列表。但这样做很幼稚：

<input ... ng-click="selected = null;" />

或

<input ... ng-focus="selected = null;" />

不起作用 - 预输入只是停止工作。有什么解决办法吗？谢谢。

【问题讨论】：

看看这个问题的第二个答案：stackoverflow.com/questions/20879773/…。
@Fjut 这类作品 - 稍作修改，谢谢。

标签： angularjs twitter-bootstrap bootstrap-typeahead angular-bootstrap

【解决方案1】：

可能最简单的解决方案是为此目的引入以下指令：

.directive('resetTypeahead', function () {
    return {
      require: 'ngModel',
      link: function (scope, element, attrs, ngModel) {
        element.bind('click', function (e) {
          var viewValue = ngModel.$viewValue;
          if (viewValue) {
            ngModel.$setViewValue('');
            ngModel.$render();
          }
        });
      }
    }
  })

Demo: plunker

【讨论】：