Changing CSS Dynamically in Angular Directive?

Question

I have a directive that I am currently making that is an input field of type text. Now I would like this field's width to grow dynamically if the text gets too big for the input field. Below is my directive:

.directive('dynamicInput', function () {
    return {
        restrict: 'E',
        template: '<input type="text" style="display: inherit;" class="form-control" required />',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {


            console.log('ATTRS: ', attrs);
            console.log('ELEMENT: ', element);

            if(attrs.width){
                console.log('WiDTH: ', attrs);

            }

        }
    }
});

Here is the plunker:

Change Width Dynamically.

I know you can change the CSS class youre using on your element object, however, I dont just want to change the class I want to basically dynamically change the width as the text increases inside the box. So the question is: How can I change the CSS on every fire of the 'onchange' event to the length of the text being entered? Also, I would like to keep this contained within a directive, so that I am not relying on anything within the parent scope in which its declared in.

Answer 1

You can get your input element, and then do whatever you want with it using vanilla javascript or angular object element.

Like this (link function):

var inputEl = angular.element(element.children()[0]);

inputEl.on('keydown', function() {
   inputEl.attr('size', inputEl.val().length); 
});

This does not do exactly what you want I think, but you get the idea. You have access to the element inside the directive, so this kind of logic is very easy to implement without depending on anything else but itself.

Modified plunker.