重点AngularJS输入杀死名单NG-重复过滤器 [英] AngularJS input with focus kills ng-repeat filter of list
问题描述
显然,这是由我作为新AngularJS引起的,但我不知道是什么问题。
Obviously this is caused by me being new to AngularJS, but I don't know what is the problem.
基本上,我有一个项目清单,并用于过滤坐落在一个蹦出侧抽屉列表中输入控制。结果
这完美的作品,直到我添加了一个指令,将焦点设置到输入控制,当它变得可见。然后重点工作,但过滤器停止工作。没有错误。删除焦点={{打开}}从标记,使过滤器的工作。
Basically, I have a list of items and an input control for filtering the list that is located in a pop out side drawer.
That works perfectly until I added a directive to set focus to that input control when it becomes visible. Then the focus works, but the filter stops working. No errors. Removing focus="{{open}}" from the markup makes the filter work.
对焦方式从这个计算器后采取:
如何设置焦点AngularJS?
The focus method was taken from this StackOverflow post: How to set focus in AngularJS?
下面是code ...
Here is the code...
/* impersonate.html */
<section class="impersonate">
<div header></div>
<ul>
<li ng-repeat="item in items | filter:search">{{item.name}}</li>
</ul>
<div class="handle handle-right icon-search" tap="toggle()"></div>
<div class="drawer drawer-right"
ng-class="{expanded: open, collapsed: !open}">
Search<br />
<input class="SearchBox" ng-model="search.name"
focus="{{open}}" type="text">
</div>
</section>
// impersonateController.js
angular
.module('sales')
.controller(
'ImpersonateController',
[
'$scope',
function($scope) {
$scope.open = false;
$scope.toggle = function () {
$scope.open = !$scope.open;
}
}]
);
// app.js
angular
.module('myApp')
.directive('focus', function($timeout) {
return {
scope: { trigger: '@focus' },
link: function(scope, element) {
scope.$watch('trigger', function(value) {
if(value === "true") {
console.log('trigger',value);
$timeout(function() {
element[0].focus();
});
}
});
}
};
})
任何援助将大大AP preciated!
Any assistance would be greatly appreciated!
谢谢!
萨德
推荐答案
的焦点
指令使用一个的隔离范围的
scope: { trigger: '@focus' },
所以,通过添加指令到输入
-tag, NG-模式=search.name
不再指向 ImpersonateController
,但这一新的隔离范围。
So, by adding the directive to the input
-tag, ng-model="search.name"
no longer points to ImpersonateController
but to this new isolated scope.
而不是尝试:
ng-model="$parent.search.name"
演示: http://jsbin.com/ogexem/3/
P.S:下一次,请尝试发布的可复制的code。我不得不做出了相当多的这一切是如何应接线的假设。
P.s.: next time, please try to post copyable code. I had to make quite a lot of assumptions of how all this should be wired up.
这篇关于重点AngularJS输入杀死名单NG-重复过滤器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!