在我的AngularJS / Ui-Router应用程序中,我有一系列输入框,如下所示:
<input ng-model="vm.filter" ng-keyup="vm.onKeyUp($event)" type="text" class="form-control" id="filter">
然后我有一个控制器,我在其中放了onKeyUp
函数,如下所示:
var vm = this;
vm.onKeyUp = function (e) {
var val = e.currentTarget.value;
$state.go('aState', { 'filter': val });
}
这将触发状态更改(实际上只是状态参数filter
已更改)将在场景后面调用resolve,在流程结束时,我的数据集被过滤并且子集显示。惊人的。
但是有一点问题:在状态改变后,HTML输入失去了焦点,我无法弄清楚如何在流程结束时将焦点设置为焦点。 这是必要的,因为用户开始在输入框中书写,然后当他的焦点变得“笨拙地”时会感到惊讶。丢失。糟糕的用户体验。
答案 0 :(得分:0)
好的,我可以读到你只需在url(:filter
)上调用不同参数的相同状态,即使状态相同也会发生的情况是stateChange强制重新加载视图因此失去了专注的元素。
这是行为,除非您在event.preventDefault()
上$stateChangeStart
,但我非常确定您的数据不会更新。
所以可能的解决方案是imho:
重新思考你的流程,因此它取决于状态变化。 (这里不需要编码:P)
找到一种方法来保存活动元素并将其设置为重新加载,例如。
//sessionStorage to prevent data stored after window is closed;
$scope.$on('$stateChangeStart', function(){
$window.sessionStorage.setItem('focusedId', '#' + document.activeElement.id);
});
$scope.$on('$viewContentLoaded', function(){
if((var id = $window.sessionStorage.getItem('focusedId'))) {
$DOM.focus(id);
//Use a service for DOM manipulation, you know manipulation in controllers is bad :(
}
});
` 服务可能是这样的:
.factory('$DOM', ['$window', '$timeout', function ($window, $timeout) {
return {
__constructor: function (selector, event) {
$timeout(function () {
var element = (typeof selector == 'object') ?
selector :
$window.document.querySelector(selector);
(!!element && !!element[event]) ? element[event]() : null;
});
},
focus: function (selector) {
this.__constructor(selector, 'focus');
},
blur: function (selector) {
this.__constructor(selector, 'blur');
}, //and so....
};
}])
如果您找到更好的方式评论,也许您可以刷新数据,防止刷新视图,我对ui.router的理解是错误的:)