ngTagsInput 自动完成显示点击建议答案

【问题标题】：ngTagsInput autocomplete show suggestions on clickngTagsInput 自动完成显示点击建议
【发布时间】：2015-02-02 12:13:06
【问题描述】：

我想自定义自动完成的样式和行为，使其类似于按钮。主要问题是自动完成目前可以在向下箭头、焦点和空白处显示建议。

有任何实现这个的指针吗？有什么替代模块可以做到这一点？

【问题讨论】：

标签： angularjs ng-tags-input

【解决方案1】：

directive tagsInput 被定义为

tagsInput.directive('tagsInput', function($timeout, $document, tagsInputConfig) {
...
 return {
    restrict: 'E',
    require: 'ngModel',
    scope: {
        tags: '=ngModel',
        onTagAdded: '&',
        onInvalidTag: '&',
        onTagRemoved: '&'
    },
    replace: false,
    transclude: true,
    templateUrl: 'ngTagsInput/tags-input.html',

它将加载ngTagsInput/tags-input.html 作为其模板。那我们来看看这个file

<input class="input"
       ng-model="newTag.text"
       ng-change="eventHandlers.input.change(newTag.text)"
       ng-keydown="eventHandlers.input.keydown($event)"
       ng-focus="eventHandlers.input.focus($event)"
       ng-blur="eventHandlers.input.blur($event)"
       ng-paste="eventHandlers.input.paste($event)"
       ng-trim="false"
       ng-class="{'invalid-tag': newTag.invalid}"
       ti-bind-attrs="{type: options.type, placeholder: options.placeholder, tabindex: options.tabindex, spellcheck: options.spellcheck}"
       ti-autosize>

所以你可以在这里添加你自定义的动作ng-click="eventHandlers.input.click($event)"并在指令中实现点击功能。

自定义样式应该类似。

【讨论】：

感谢您的回答。我还没有尝试过，但想出了一个修改自动完成指令的解决方案。

【解决方案2】：

根据 Rebornix 的回答，我最终使用新的 loadOnClick 参数来分叉和修改自动完成指令，该参数将调用建议列表.load()。

可能需要进行更多微调，但它可以按预期工作。更改提交如下：event handler - template 和 implementation。

【讨论】：