ng-keydown event double fire with custom directive

Question

I've used the code found in the link below, because I want a directive to be added to a certain textarea only if the user is using a desktop. This same textarea also has a ng-keydown directive that's strangely being double fired at each new key pressed when this code is added.

Any idea why it's happening or how can I solve it?

angularjs-conditional-directive-only-on-desktop

Update:

Also a strange behavior is that when you delete the last character of a word, it automatically deletes a previous space (if there is some).

To test it, open the console and check that at any key press, you will get the message "teste1" twice

jsFiddle

relevant part of this code:

myApp.directive('notOnMobile', function($compile) {
    // Perform detection.
    // This code will only run once for the entire application (if directive is present at least once).
    // Can be moved into the compile function if detection result needs to be passed as attribute.
    var onMobile = false;

    return {
        compile: function compile(tElement, tAttrs) {
            if (!onMobile) tElement.attr(tAttrs.notOnMobile, '');
            tElement.removeAttr('not-on-mobile');

            return function postLink(scope, element) {
                $compile(element)(scope);
            };
        }
    };
});

and

<textarea ng-model="main.queryString"
          rows="1"
          ng-keydown="main.textareaAction($event)"
          not-on-mobile="auto-focus"></textarea>

please create a jsFiddle, or jsbin, with your code. – Joao Polo Oct 23 '15 at 00:14 — Joao Polo, Oct 23 '15 at 00:14

score 3 · Accepted Answer · edited May 23 '17 at 10:27

You will need to add the terminal and priority for the directive. So it won't compile the element twice:

myApp.directive('notOnMobile', function($compile) {
// Perform detection.
// This code will only run once for the entire application (if directive is present at least once).
// Can be moved into the compile function if detection result needs to be passed as attribute.
var onMobile = false;

return {
    terminal:true,
    priority:1001,
    compile: function compile(tElement, tAttrs) {
        if (!onMobile) tElement.attr(tAttrs.notOnMobile, '');
        tElement.removeAttr('not-on-mobile');

        return function postLink(scope, element) {
            $compile(element)(scope);
        };
    }
};
});

Find the working code sample here https://jsfiddle.net/h1gr0dwp/

EDIT:

You can find a explanation for terminal and priority here Add directives from directive in AngularJS

ng-keydown event double fire with custom directive

1 Answers1