css - 在 Angular 指令中动态更改 CSS？

Question

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

.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:

Change Width Dynamically .

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

Answer 1

您可以获得您的输入元素，然后使用原始 javascript 或 Angular 对象元素对其进行任何您想做的事情。

像这样(链接函数):

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

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

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

Modified plunker .