Question

我似乎无法弄清楚这个的逻辑，希望有人有一些建议。

我正在创建一个组合框指令，它简化了这个：

<div class="combobox" ng-click="$event.stopPropagation()">
    <input type="text" ng-model="search.value" placeholder="System" ng-class="{ resultsOpen: showDropdown }" ng-change="revealDropdown()" ng-focus="revealDropdown()" ng-blur="hideDropdown()">
    <a class="dropdown" ng-click="toggleDropdown($event)"></a>
    <div class="results" ng-show="showDropdown">
        <a ng-repeat="set in data | filter:search" ng-click="setBox($event, set)" ng-bind-html="set.value"></a>
</div>

我创建的链接功能如下：

link: function (scope, element, attrs) {
    scope.showDropdown = false;
    $combobox = element.children('.combobox');
    $combobox.children('.results').css({ 'top': $combobox.outerHeight(), 'width': $combobox.outerWidth() });
    $combobox.children('.dropdown').css('height', $combobox.outerHeight());

    scope.toggleDropdown = function ($event) {
        $event.stopPropagation();
        scope.showDropdown = scope.showDropdown?false:true;
    };
    scope.revealDropdown = function () {
        if (isNaN(scope.search) || scope.search.length == 0 || $filter('filter')(scope.data, scope.search).length) 
            scope.showDropdown = true;
        else 
            scope.showDropdown = false;
    };
    scope.hideDropdown = function () {
        scope.showDropdown = false;
    };
    $('html').click(function () {
        scope.hideDropdown();
        scope.$apply();
    });

    scope.setBox = function ($event, set) {
        console.log(set);
        scope.search = set;
    };
}

在30分钟的摆弄后变得明显的问题是，当您单击选项中的链接时，会触发模糊，导致链接设置在链接点击功能触发之前关闭。

我唯一能想到的就是创建一个小的超时，它会在200ms之后发生，如果点击命中，则取消设置超时，但这绝对是一种黑客的方法。我想知道是否有人有更合理的方式来做这件事。

JSFiddle（虽然我不确定我是否正确设置）：http://jsfiddle.net/v7mbrku2/

Answer 1

使用ng-mousedown代替ng-click：

<a ng-repeat="set in data" ng-mousedown="setBox($event, set)">

这是有效的，因为mousedown事件发生在blur之前，而click发生在blur之后。

这是一个有效的演示：http://plnkr.co/edit/QG2GcCSkOTcx91wvQzu0?p=preview

输入模糊时的触发功能无需单击某个链接

1 个答案: