首页 文章

具有焦点的AngularJS输入杀死列表的ng-repeat过滤器

提问于
浏览 次
0

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

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

焦点方法取自此StackOverflow帖子：How to set focus on input field?

这是代码......

/* 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

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

任何帮助将不胜感激！

谢谢！萨德

angularjs angularjs-directive angularjs-ng-repeat angularjs-filter

1 回答

  • 3

    focus 指令使用隔离范围 .

    scope: { trigger: '@focus' },

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

    而是尝试：

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

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

    P.s . ：下次，请尝试发布可复制的代码 . 我不得不做出很多关于应该如何连线的假设 .

    回复于

相关问题