0

我有一个我目前正在制作的指令，它是一个文本类型的输入字段。现在，如果文本对于输入字段而言太大，我希望该字段的宽度动态增长。以下是我的指令：

.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);

            }

        }
    }
});

这是plunker：

动态改变宽度。

我知道您可以更改您在元素对象上使用的 CSS 类，但是，我不只是想更改我想要基本上动态更改宽度的类，因为文本在框内增加。所以问题是：如何将每次触发“onchange”事件时的 CSS 更改为正在输入的文本的长度？另外，我想将它包含在一个指令中，这样我就不会依赖它声明的父范围内的任何东西。

4

1 回答 1

1

您可以获取输入元素，然后使用 vanilla javascript 或角度对象元素对它进行任何操作。

像这样（链接功能）：

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

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

这并不完全符合我的想法，但你明白了。您可以访问指令内的元素，因此这种逻辑很容易实现，而不依赖于除自身之外的任何其他内容。

修改后的 plunker。

于 2014-10-14T13:24:03.117 回答