使用 ng-blur 和 ui-sref 无法按预期工作 [英] Using ng-blur and ui-sref doesn't work as expected

问题描述

我有一个带有自定义下拉结果面板的搜索字段，在其中输入单词或聚焦时会显示该面板.所以我的 html 看起来像这样:

<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()">搜索</button></span>
<div id="结果" ng-if="panelShown"><div ng-repeat="联系人中的联系人 | filter: { name: userSearch }"><a ui-sref="profile({ id: contact.id })">{{ contact.name }}</a>

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 数组数据的结构是这样的:

<预><代码>[{编号:1"，姓名:《乔治》},{编号:2"，姓名:亚当"},{编号:3"，姓名:罗恩"}...]

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

我遇到的问题是当我点击某些结果时，我没有从 ui-sref 发送到状态(在示例中 - 我必须被重定向到 <代码>个人资料状态).我猜模糊事件阻止了那里发生，但我想不出任何解决方案.

有人可以帮我吗?提前致谢！

解决方案

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

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

app.controller("SearchController", function($scope, $state) {$scope.goToState = 函数(状态，参数){$state.go(state, params);}}<a ng-mousedown="goToState('profile', {id: contact.id})">{{ contact.name }}</a>

I have a search field with a custom dropdown results panel which is shown when typing a word in it or when it is focused. So my html looks something like this:

<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>

The javascript is something like this:

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...
    };
}]);

So, as you can see, the structure of my $scope.contacts array data is this:

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

I want when the input is blurred to hide the panel with results (#results div) and when it's on focus again - to show it. This is working perfect actually.

The problem I'm having is when I click on some of the results, I'm not sent to the state from ui-sref (in the example - I must be redirected to the profile state). I'm guessing the blur event prevents from going on there, but I can't think of any solution for it.

Can someone help me with it? Thanks in advance!

解决方案

This is because the blur event triggers before the click event that the ui-sref is bound to, so the button you are trying to click is hidden (and hence doesn't receive the click) by the time the click is registered.

What you can do to solve this is use the ng-mousedown. The mousedown event triggers before a blur event, so it should solve your problem:

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>

这篇关于使用 ng-blur 和 ui-sref 无法按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！