我有键入一个字时被示出,或者当它被聚焦与自定义下拉结果面板搜索字段。所以,我的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>