在 Angular 指令中动态更改 CSS？答案

【问题标题】：Changing CSS Dynamically in Angular Directive?在 Angular 指令中动态更改 CSS？
【发布时间】：2014-12-09 06:35:51
【问题描述】：

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

.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 更改为正在输入的文本的长度？另外，我想把它包含在一个指令中，这样我就不会依赖它声明的父范围内的任何东西。

【问题讨论】：

使用 ng-change 并将更改处理程序放入指令 link 函数中，您也可以访问该元素
@charliefl ng-change 肯定会执行更改事件，但是，它无助于更新输入标签上的样式。

标签： css angularjs angular-ui-bootstrap angular-directive

【解决方案1】：

您可以获取您的输入元素，然后使用 vanilla javascript 或角度对象元素对它做任何您想做的事情。

像这样（链接功能）：

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

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

这并不完全符合我的想法，但你明白了。你可以访问指令中的元素，所以这种逻辑很容易实现，不依赖于其他任何东西。

Modified plunker.

【讨论】：

是angular.element(element.children()[0]); 获取输入元素属性的最佳方式。我不能只在链接功能中使用attrs？
有没有获取输入的样式，所以我可以改变宽度？而不是更改 size 属性？
我在想，这确实满足了文本输入的动态增长，但是，我的问题是关于动态更改 css，因为我需要更改输入的宽度和颜色。
您将指令用作element，因此您的attrs 指的是您的指令元素而不是输入（不确定我是否清楚）。做一个console.log(element)自己看看。至于访问css，你可以使用inputEl.css(name, value)，你可以参考angular.element documentation来查看你可以做的所有事情。如果还不够，你可以使用angular.element[0] 获取“常规” dom 元素并使用常规 javascript，如 domElement.style.css 等。