current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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.

share|improve this question
1  
use ng-change and put change handler in directive link function where you also have access to the element –  charlietfl Oct 14 '14 at 13:04
    
@charliefl the ng-change would definitely do the change event, however, it wouldnt help with updating the style on the input tag. –  britztopher Oct 14 '14 at 13:52

1 Answer 1

up vote 1 down vote accepted

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.

share|improve this answer
    
is angular.element(element.children()[0]); the best way to grab the attribute for the input element. I cant just use the attrs in the link function? –  britztopher Oct 14 '14 at 13:54
    
Is there anyway to get the style for the input, so I can change the width? Rather then change the size attribute? –  britztopher Oct 14 '14 at 17:33
    
I was thinking and this does satisfy the dynamic growth of text input, however, my question was about changing css dynamically as I need to change the width and color of the input. –  britztopher Oct 14 '14 at 17:50
    
You are using your directive as an element, so your attrs refers to your directive element instead of the input (not sure I'm clear). Do a console.log(element) to see for yourself. As for accessing the css, you can by using inputEl.css(name, value), you can refer to the angular.element documentation to see all the things you can do. And if it's not enough, you can get the "regular" dom element with angular.element[0] and use regular javascript, like domElement.style.css, and so on. –  Mimu Oct 15 '14 at 8:04

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.