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

            }

        }
    }
});

プランカーは次のとおりです。

幅を動的に変更します。

要素オブジェクトで使用している CSS クラスを変更できることはわかっていますが、ボックス内のテキストが増加するにつれて、基本的に動的に幅を変更したいクラスを変更したくありません。問題は、「onchange」イベントが発生するたびに CSS を、入力されているテキストの長さに変更するにはどうすればよいかということです。また、これが宣言されている親スコープ内のものに依存しないように、これをディレクティブ内に保持したいと思います。

4

1 に答える 1

1

入力要素を取得し、バニラ JavaScript または角度オブジェクト要素を使用して、必要なことを行うことができます。

このように（リンク機能）：

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

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

これは、私が思っていることとまったく同じではありませんが、アイデアは得られます。ディレクティブ内の要素にアクセスできるため、この種のロジックは、それ自体以外に依存することなく非常に簡単に実装できます。

改造プランカー。

于 2014-10-14T13:24:03.117 に答える