Question

我创建了一个文字输入，在输入时出现了一些建议（就像在Google上一样 - 你正在写一些东西而且它会建议你一些文字）。

<input id="smartBar" ng-focus="showSuggestions=true" ng-blur="showSuggestions=false" ng-model="smartBar" ng-keydown="smartBarKeyDown($event)" focus-on="smartBar" />
                <table class="suggestionList" ng-show="showSuggestions">
                    <tr ng-repeat="sg in suggestions" ng-class="{highlighedSuggestion: $index == highlightedSuggestion}" ng-click="suggestionClicked($index)">
                        <td ng-repeat="nt in sg.NoteTags" style="padding: 0rem 1rem">
                            {{nt.Tag.Name}}
                        </td>
                    </tr>
                </table>

我希望增加点击其中一个＆＃34;建议＆＃34; （＆lt; TR＆gt; html属性中有ng-click属性）。不幸的是，ng-blur看起来比ng-click更早，所以当我点击其中一个选项时，输入会失去焦点，并且在检测到点击之前，suggestionList变得不可见。

如何在隐藏suggestionList之前检测到点击？

Answer 1

你做不到。但是，您可以使用ngMousedown代替ngClick来实现所需的功能：

<强> HTML：

ng-mousedown="suggestionClicked($index, $event)

<强> JS：

$scope.suggestionClicked = function(index, evt) {
    //detect left click
    if(evt.which === 1) {
        //your code
    }
}

Answer 2

您的一个选择是使用$timeout来延迟删除建议列表，并使用点击事件$cancel超时。

var suggestionTimeout = $timeout(angular.noop);

function setSuggestionFalse = function() {
    vm.showSuggestions = false;
 };

vm.onSmartBarBlur = function () {
    //delay the removal
    suggestionTimeout = $timeout(setSuggestionFalse, 50);
};

vm.onSuggestionClick = function () {
    //cancel the removal
    $timeout.cancel(suggestionTimeout);
    //show suggestion
};

有关$ timeout的详细信息，请参阅AngularJS $timeout API Reference。

Answer 3

在开发我自己的自动完成下拉列表时遇到完全相同的问题。 $ timeout和ng-mousedown解决方案对我来说太脏了，并且具有负面的UX副作用。这就是我最终想到的：

var suppressInputFocusedChange = false;

$scope.onBlur = function() {
    if(suppressInputFocusedChange === true) {
        suppressInputFocusedChange = false;
        return false;
    }
    $scope.showSuggestions = false;
};

$scope.onFocus = function() {
    $scope.showSuggestions = true;
};

$scope.suggestionMouseDown = function() {
    suppressInputFocusedChange = true;
};

$scope.suggestionClicked = function() {
    $scope.showSuggestions = false;
};

所以基本上，当你开始点击项目（ng-mousedown）时，你将suppressInputFocusedChange标志设置为true。当这个标志出现'onBlur'时，方法将什么也不做，列表将被suggestionClicked方法隐藏。

如何在ng-blur之前调用ng-click？

3 个答案: