Question

我有一个带有自定义下拉结果面板的搜索字段，该面板在输入单词或焦点时显示。所以我的HTML看起来像这样：

<div class="input-group">
    <input type="text" class="form-control" ng-model="userSearch" ng-change="onInputChange()" ng-focus="onInputChange()" ng-blur="onInputBlur()" />
    <span class="input-group-btn">
        <button type="button" ng-click="search()">Search</button>
    </span>
</div>

<div id="results" ng-if="panelShown">
    <div ng-repeat="contact in contacts | filter: { name: userSearch }">
        <a ui-sref="profile({ id: contact.id })">{{ contact.name }}</a>
    </div>
</div>

javascript是这样的：

app.controller("SearchController", ["$scope", function($scope) {
    $scope.contacts = [...];
    $scope.panelShown = false;

    $scope.onInputChange = function() {
        $scope.panelShown = true;
    };

    $scope.onInputBlur = function() {
        $scope.panelShown = false;
    };

    $scope.search = function() {
        // bla bla bla...
    };
}]);

因此，正如您所看到的，我的$scope.contacts数组数据的结构是：

[
   {
       id: "1",
       name: "George"
   },
   {
       id: "2",
       name: "Adam"
   },
   {
       id: "3",
       name: "Ron"
   }
   ...
]

我希望当输入模糊时隐藏带有结果（#results div）的面板以及当它再次聚焦时 - 显示它。这实际上很完美。

我遇到的问题是，当我点击某些结果时，我没有从ui-sref发送到该状态（在示例中 - 我必须重定向到{{ 1}}状态）。我猜测模糊事件无法进行，但我无法想到任何解决方案。

有人可以帮助我吗？提前谢谢！

Answer 1

这是因为blur事件在绑定click的{{1}}事件之前触发，因此您尝试单击的按钮被隐藏（因此无法接收）点击注册时的点击次数。

您可以使用ui-sref来解决此问题。 ng-mousedown事件在mousedown事件之前触发，因此它应该可以解决您的问题：

blur

使用ng-blur和ui-sref并不像预期的那样工作

1 个答案: