采用NG-模糊和UI的SREF不能按预期工作 [英] Using ng-blur and ui-sref doesn't work as expected

问题描述

我有键入一个字时被示出，或者当它被聚焦与自定义下拉结果面板搜索字段。所以，我的HTML看起来像这样：

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>

JavaScript的是这样的：

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

所以，你可以看到，我的 $ scope.contacts 阵列数据的结构是这样的：

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"
   }
   ...
]

我要当输入模糊，隐藏与结果面板（ #results DIV）时，它的焦点再次 - 表现出来。这是工作实际上是完美的。

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.

我遇到的问题是，当我点击了一些成绩，我不是从发送到国家的UI SREF （在这个例子 - 我必须重定向到简介状态）。我是从那里的一切猜测模糊事件prevents，但我不认为它的​​任何解决方案。

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!

推荐答案

这是因为模糊事件之前的点击事件的 UI-SREF 势必会，让您尝试单击该按钮被隐藏（因此没有收到点击）所花费的时间点击注册。

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.

你能做些什么来解决这个问题是使用 NG-鼠标按下。

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-模糊和UI的SREF不能按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！