Question

我正在尝试在md-autocomplete的md-item-template中放置一个按钮来调用某个动作。

问题：我无法阻止选择项目。 $event.preventDefault();无效，文档也没有提示。

我的目标是允许（正常）选择建议，或者当您单击按钮时，应将此建议中的文本复制到搜索框中。在第二种情况下，用户现在可以继续写入以进一步缩小他的搜索范围。 Google在其移动搜索中具有此功能，允许用户缩小搜索范围而无需编写所有内容，我希望在我的应用中使用此功能。

<md-autocomplete md-selected-item="nvSearchCtrl.selectedItem"
             md-search-text="nvSearchCtrl.unfinishedParticle"
             md-items="item in nvSearchCtrl.querySearch(nvSearchCtrl.unfinishedParticle)"
             md-item-text="item.name">
<md-item-template>
    <div layout="row">
        <span>{{item.name}}</span>
        <md-button ng-click="$event.preventDefault();nvSearchCtrl.unfinishedParticle=item.name;"
                   class="md-icon-button">
            <md-icon>call_made</md-icon>
        </md-button>
    </div>
</md-item-template>
</md-autocomplete>

我准备了一个显示错误的小提琴：https://jsfiddle.net/4509c87b/

Answer 1

以下是您的问题的解决方案。在下面的代码段中添加了一个新的指令停止事件。

使用angular指令

完成

.directive('stopEvent', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            element.bind('click', function (e) {
                e.stopPropagation();
            });
        }
    };
 });

Fiddle here

Answer 2

我相信您可能正在寻找event.stopPropagation()（以便点击事件不会继续冒泡dom以触发选择）而不是event.preventDefault()。

使用ng-click的md-autocomplete模板无法阻止选择

2 个答案:

使用angular指令