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

前端之家收集整理的这篇文章主要介绍了angularjs – 使用ng-click的md-autocomplete模板无法阻止选择前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图在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/

解决方法

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

通过使用角度指令完成

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

Fiddle here

猜你在找的Angularjs相关文章