如何从指令监听textarea的变化？

Question

I have a textarea that looks like this:

    <textarea ng-controller="text" autoexpand id="tasks" ng-focus="uncheckAll()" ng-change="processText()" ng-model="tasks.tasks"></textarea>

The directive autoexpand is adding rows to the textarea based on how many lines you write. (it has nowrap set in css)

//adding rows to the textarea based on the number of newlines.
directive('autoexpand', function($timeout){
    function expand(element){
        var count = element.val().split('\n').length+1;
        element.attr('rows', count)
    }
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function(scope, element){
        //onload
        $timeout(function(){
            expand(element);
        });
        element.on('keydown', function (){
                console.log('change')
                expand(element)
            });
        }

    }
}).

This works when I update the textarea by writing to it, but sometimes, It's updated from the model. How can I run expand() also in that case (I tried element.on('change'... , element.change( and element.bind('change' but it doesn't seem to trigger at all

Answer 1

You should be listening for change on ngModel this way:

// here "model" is linked to ng-model property
scope.$watch("model", function() {
   console.log("Changed");
   expand(element);
});

Though you can certainly watch 'tasks.tasks' , it will be limiting the usefulness of your directive to just one use case.

Answer 2

you can listen in on ngModel changes by doing somethign like this:

scope.$on("ngModel", function(){
    //this will fire when ng model changes
}, true);

Answer 3

You want to listen to and react to the model (instead of the element) whenever possible. You can have a $watch in the directive that will fire whenever the model changes (regardless of how it changes):

scope.$watch(attrs.ngModel, function(){
    expand(element);
});

You don't even need the keydown event handler anymore. The only other thing you need to do is add ng-trim="false" to the text area. Otherwise, the model will ignore whitespace (including any new lines that you type).

Demo