在下拉菜单中的输入字段上停止单击事件(AngularJS过滤器元素)

Question

我有一个带有输入字段的下拉菜单来搜索我的li元素.问题是:每当我点击输入字段以放入我的搜索查询时,就会发生点击事件并且下拉菜单会消失.

我在输入字段上尝试了preventDefault,但它没有用.我怎么能阻止这种行为呢？

这是一个Plunker:http://plnkr.co/edit/SlbWZ5Bh62MDKWViUsMr

这是我的标记(它是ng-model ="customerFilter"的输入):

<div class="button">
  <a class="btn btn-large grey dropdown-toggle" data-toggle="dropdown" href="#">
    Organisation
  </a>
  <ul class="dropdown-menu grey" >
    <input type="text" ng-model="customerFilter">
    <li ng-repeat="customer in customers | filter:customerFilter | orderBy:sortorder" ng-click="addCardGrey(customer)">{{ customer.name }}</li>
  </ul>
</div>

非常感谢你提前!

Answer 1

preventDefault 停止浏览器对该事件的默认操作.

您想要使用的是stopPropagation阻止事件冒泡事件链.

例如,你可以在这样的指令中使用它:

码:

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

标记:

<input type="text" ng-model="customerFilter" my-input>