使用 ng-blur 和 ui-sref 不能按预期工作答案

【问题标题】：Using ng-blur and ui-sref doesn't work as expected使用 ng-blur 和 ui-sref 不能按预期工作
【发布时间】：2014-12-16 21:14:51
【问题描述】：

我有一个带有自定义下拉结果面板的搜索字段，当在其中输入单词或获得焦点时会显示该面板。所以我的 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 发送到状态（在示例中 - 我必须被重定向到profile 状态）。我猜模糊事件会阻止那里发生，但我想不出任何解决方案。

有人可以帮我吗？

【问题讨论】：

标签： javascript html angularjs dom-events angular-ui

【解决方案1】：

这是因为blur 事件在ui-sref 绑定到的click 事件之前触发，因此您尝试单击的按钮到那时被隐藏（因此不会收到点击）点击已注册。

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

app.controller("SearchController", function($scope, $state) {
  $scope.goToState = function (state, params) {
    $state.go(state, params);
  }
}

<a ng-mousedown="goToState('profile', {id: contact.id})">{{ contact.name }}</a>

【讨论】：