Ввод AngularJS с фокусом убивает фильтр ng-repeat списка

Очевидно, это вызвано тем, что я новичок в AngularJS, но я не знаю, в чем проблема.

По сути, у меня есть список элементов и элемент управления вводом для фильтрации списка, который находится во всплывающем боковом ящике.
Это работает отлично, пока я не добавил директиву для установки фокуса на этот элемент управления вводом, когда он становится видимым. Потом фокус работает, но фильтр перестает работать. Нет ошибок. Удаление focus="{{open}}" из разметки заставляет фильтр работать.

Метод фокусировки был взят из этого сообщения StackOverflow: Как установить фокус на поле ввода?

Вот код...

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

Будем очень благодарны любой помощи!

Спасибо! Тад


person Thad Peiffer    schedule 16.07.2013    source источник
comment
Не могли бы вы предоставить plnkr? plnkr.co/edit В разделе "Новый" вы можете начать с уже интегрированного angular.   -  person Narretz    schedule 16.07.2013


Ответы (1)


Директива focus использует изолированную область.

scope: { trigger: '@focus' },

Итак, добавив директиву к тегу input, ng-model="search.name" больше не указывает на ImpersonateController, а указывает на эту новую изолированную область.

Вместо этого попробуйте:

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

демо: http://jsbin.com/ogexem/3/


P.s.: в следующий раз попробуйте опубликовать копируемый код. Мне пришлось сделать довольно много предположений о том, как все это должно быть подключено.

person Yoshi    schedule 16.07.2013
comment
Спасибо, @Yoshi! Это сработало, как рекламируется! Прошу прощения за код в неправильном формате. С этого момента я буду использовать plunker, как предложил @Narretz. - person Thad Peiffer; 16.07.2013