0

これらの素晴らしい記事のリンクに従って、送信する必要があるデータの性質によって特徴付けられる必要があるウィンドウのテンプレートを動的に作成する独自のディレクティブを作成しました。より明確にするために、アプリはテキスト入力を送信する必要があります。ディレクティブは、ブール値を送信する必要がある場合にチェックボックスではなく、入力領域を作成します。
ディレクティブを正常に取得した後、テンプレートのコンテンツをバインドして返送する際に問題が見つかりました。私はディレクティブ
のドキュメントを読みました。トランスクルードの値が役立つ可能性がありますが、私の試みでは成功しませんでした。以下のコードを記述します。

HTML

<div id="notespace">
    <div id="userContainer" >
        <template-type content="additionalField">
                {{toBind}}
        </template-type>
        <button ng-click="addNote(toBind)">OK</button>
    </div>
</div>

HTMLコントローラーページのJSファイル

var noteCtrl = function ($scope) {   
        $scope.additionalField=[{
             template:'text'
             }]

        for(var counter=0;counter<$scope.additionalField.length;counter++){
            var template;
            switch ($scope.additionaField[counter].template) {
                case 'text':
                    template = 'inputNote';
                    break;
                case 'otherTypeOfText':
                    template = 'areaNote';
                    break;
                case 'number':
                    template = 'inputNote';
                    break;                   
                case 'bool':
                    template = 'checkNote';
                    break;
                case 'file':
                    template = 'fileNote';
                    break;
            }
        }
    })
$scope.addNote=function(a) {
    alert(a);
}

DIRECTIVE の JSfile

templateApp.directive('templateType',function($compile){
    var inputNote='<div><input type="text"/></div>';
    var areaNote='<div><textarea ></textarea></div>';
    var checkNote='<div><input type="checkbox" /></div>';
    var fileNote='<div >file</div>';

    var getTemplate=function(type){
        var template='';
        switch (type) {
            case 'inputNote':
                template = inputNote;
                break;
            case 'areaNote':
                template = areaNote;
                break;
            case 'checkNote':
                template = checkNote;
                break;
            case 'fileNote':
                template = fileNote;
                break;
        }
        return template;
    };
    var linker=function(scope,element,attrs){

        element.html(getTemplate(scope.content.template));
        $compile(element.contents())(scope);
    };
    return{
        restrict:"E",
        replace:true,
        transclude:true,
        link:linker,
        scope:{
            content:'='
        }
    };
});

非常に明確にするために、問題は addNote 関数のアラートが何も出力しないか未定義であり、inputArea のようなテンプレートの内容ではないことです。

4

2 に答える 2

1

ディレクティブ内で送信した値を表示する場合ng-transcludeは、式の補間値をコピーする要素にディレクティブを追加するだけですtoBind。

app.directive('foobar', [function() {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        template: '<div ng-transclude></div>',
        link: ...
    }
}])

使用法：

<foobar>{{someValueFromScope}}</foobar>

結果：

<div>someValueFromScope</div>

編集：

私が今あなたの問題を理解していれば、次のようなことができます：

<template-type content="additionalField" option="toBind"></template-type>

ディレクティブ:

var inputNote='<div><input type="text" ng-model="option"/></div>';

scope: {
    content: '=',
    option: '@'
}

入力の内容を変更すると、変数に反映されoptionます。

編集2：

私は実用的な例を手に入れました：jsfiddle

また、以前の編集でコードを修正しました。

編集 3: の値を変更するとoptions、ディレクティブはイベントoptionsValueChangedをその親スコープ (たまたまコントローラーのスコープ) にブロードキャストします。スコープは、 の値を更新することによって、このイベントに反応しますdata.anotherValue。しかし、実際にはこれらを処理する方法ではありません。複数の場所で値を使用する必要がある場合は、provider(valueまたはservice) を使用することをお勧めします。あなたの質問にはあまり関係がありません/役に立ちません。

于 2014-05-13T10:39:41.103 に答える