带有焦点的 AngularJS 输入会杀死列表的 ng-repeat 过滤器 [英] AngularJS input with focus kills ng-repeat filter of list

问题描述

显然这是因为我是 AngularJS 的新手，但我不知道是什么问题.

基本上，我有一个项目列表和一个用于过滤位于弹出侧抽屉中的列表的输入控件.
直到我添加了一个指令来在它变得可见时将焦点设置到该输入控件之前，这一切正常.然后焦点工作，但过滤器停止工作.没有错误.从标记中删除 focus="{{open}}" 使过滤器工作.

focus 方法取自这篇 StackOverflow 帖子:如何在输入框上设置焦点?

这是代码...

/* impersonate.html */<section class="impersonate"><div 标题></div><ul><li ng-repeat="item in items | filter:search">{{item.name}}</li><div class="handle handle-right icon-search" tap="toggle()"></div><div class="drawer drawer-right"ng-class="{展开:打开，折叠:!open}">搜索
<input class="SearchBox" ng-model="search.name"focus="{{open}}" type="text">

</节>//impersonateController.js有角的.module('销售').控制器('模拟控制器',['$范围',功能($范围){$scope.open = false;$scope.toggle = 函数 () {$scope.open = !$scope.open;}}]);//app.js有角的.module('myApp').directive('focus', function($timeout) {返回 {范围:{触发器:'@focus'}，链接:函数(范围，元素){scope.$watch('trigger', function(value) {if(value === "true") {console.log('trigger',value);$超时(功能(){元素[0].focus();});}});}};})

任何帮助将不胜感激！

谢谢！萨德

解决方案

focus 指令使用一个隔离作用域.

scope: { trigger: '@focus' },

因此，通过将指令添加到 input-tag，ng-model="search.name" 不再指向 ImpersonateController但是对于这个新的隔离范围.

改为尝试:

ng-model="$parent.search.name"

演示:http://jsbin.com/ogexem/3/

<小时>

P.s.:下次，请尝试发布可复制代码.我不得不对所有这些应该如何连接做出很多假设.

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.

The focus method was taken from this StackOverflow post: How to set focus on input field?

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(); 
                        });
                    }
                });
            }
        };
    })

Any assistance would be greatly appreciated!

Thanks! Thad

解决方案

The focus directive uses an isolated scope.

scope: { trigger: '@focus' },

So, by adding the directive to the input-tag, ng-model="search.name" no longer points to ImpersonateController but to this new isolated scope.

Instead try:

ng-model="$parent.search.name"

demo: http://jsbin.com/ogexem/3/

---

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-repeat 过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！