angularjs - 在下拉菜单中的输入字段上停止单击事件（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>