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

发布时间：2020-12-17 17:17:10 所属栏目：安全来源：网络整理

导读：我试图在md-autocomplete的md-item-template中放置一个按钮来调用某个动作. 问题：我无法阻止选择项目. $event.preventDefault();不起作用,文档也没有提示. 我的目标是允许(正常)选择建议,或者当您单击按钮时,应将此建议中的文本复制到搜索框中.在第二种情况

我试图在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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!