0

一部の入力に応じて、選択とテキストエリアまたは入力フィールドのいずれかを追加するディレクティブがあります。例えば

app.directive('monkey', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div><select><option>1</option><textarea>{{text}}</textarea></div>'
        scope: {
            text: "="
        },
        link: function(element, attrs, scope) {

            // Add listeners etc

        }
    }
});

htmlは次のようになります

<monkey text="model.name" type="input"></monkey>

type 属性を見て、テンプレートを変更できるようにしたい

<div><select><option>1</option><textarea>{{text}}</textarea></div>

に

<div><select><option>1</option><input>{{text}}</input></div>

コンパイル機能は私が使用すべきものですか?

4

1 に答える 1

1

はい、これには compile メソッドを使用できます。

ただし、限定セットがある場合は、ng-if最初に選択します。物事をもう少しシンプルに保つためです。

したがって、テンプレートは次のようになります。

<div><select><option>1</option><textarea ng-if="type == 'textarea'">{{text}}</textarea><input ng-if="type == 'input'">{{text}}</input></div>

typeしたがって、ディレクティブも取り入れる必要があります。ディレクティブ全体は次のとおりです。

app.directive('monkey', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div><select><option>1</option><textarea ng-if="type == 'textarea'">{{text}}</textarea><input ng-if="type == 'input'">{{text}}</input></div>'
        scope: {
            text: "=",
            type: "@"
        },
        link: function(element, attrs, scope) {

            // Add listeners etc

        }
    }
});
于 2013-11-13T11:02:10.263 に答える