How can I trigger ng-change when a space is entered?

Question

I have a function that is called when a textarea's value is changed. It works great, except when the spacebar is pressed, then nothing is called. Is there a way to activate this? Technically, the content is changing, and I would like the function to be called regardless.

I am attaching a fiddle with the code. You can see the $scope.log array does not push a new element when the spacebar is pressed (enter key as well), but it does with any other key that is not white space.

Sample fiddle: http://jsfiddle.net/UJWLN/4/

Answer 1

You can use the directive ng-trim in your input and set it to false, like this:

<textarea ng-change="changeFunction()" ng-model="myModel" ng-trim="false"></textarea>

But this won't work for every case. If you want something to be executed on every single keystroke, try with a custom directive. I wrote one for you:

http://jsfiddle.net/UJWLN/6/

myApp.directive('ngKeystroke', function(){
    return {
        restrict: 'A',
        link: function(scope, elem, attrs){
            elem.bind("keyup", function(){
                scope.log.push('called');
                scope.$digest(); 
            });
        }
    };
});

Answer 2

To trigger ng-change event on space-bar also, I have used ng-trim . And it is working fine.

<textarea ng-model="myCtrl.content" name="content" ng-trim="false" rows="5" cols="15" maxlength="250"></textarea>