CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
user491880
user491880

Reputation: 4869

Angular Directive for keydown breaks other functionality

I'm trying to listen to keydown events on a formfield. To do this I've built a directive with a "keydown" attribute as follows:

var keydown = function() {
    return {
        restrict: 'A',
        scope: {
            keydown: '=keydown'
        },
        link: function(scope, elem, attr) {
            $(elem).keydown(function(evt){
                scope.keydown(evt);
            });
        }
    };
};

Now I add this to my inputs markup:

<input class="search-input" type="text" ng-model="queryStr" ng-change="redrawUI()" keydown="processSearchBox" >

Now my keydown function is called and that works fine... however now my model is no longer bound to the input form field... if I change the model the form doesn't update

Upvotes: 1

Views: 352

Answers (1)

tnunamak
tnunamak

Reputation: 2069

The problem is you are creating a new "isolate" scope which is detached from the scope where redrawUI() lives. Take a look at this fiddle for an alternate approach where you inherit from the parent scope and use scope.$eval to process your event.

Upvotes: 1

Related Questions