I am currently developing a directive for an input field of type text. My goal is to have the width of this field expand dynamically if the text exceeds the size of the input field. Below is the code snippet for 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);
}
}
}
});
Check out the Plunker demo here:
I am aware that it is possible to change the CSS class on the element object, but I am looking for a solution that dynamically adjusts the width as the text length increases within the input field. My question is: How can I update the CSS based on the text length with every 'onchange' event? Additionally, I want to achieve this within a directive, without relying on the parent scope where it is declared.