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

            }

        }
    }
});

以下是摘要：

Change Width Dynamically

我知道你可以改变你在元素对象上使用的CSS类，但是，我不想只是想改变我想要的类，当文本在框内增加时，基本上动态地改变宽度。所以问题是：如何在“变化”的每一次火灾中改变CSS。事件到输入文本的长度？另外，我想将其保存在一个指令中，这样我就不依赖于其声明的父作用域内的任何内容。

Answer 1

你可以使用vanilla javascript或angular object element获取你的输入元素，然后随意做任何事情。

像这样（链接功能）：

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

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

这并不是我想要的，但你明白了。您可以访问指令中的元素，因此这种逻辑很容易实现，而不依赖于其他任何东西。

Modified plunker

在Angular Directive中动态更改CSS？

1 个答案: