3

angularjs アプリを作成しています (ノード/エクスプレス バックエンドを使用)。私のスコープには、サービスを介して非同期にデータが取り込まれる (および再取り込まれる) オブジェクトがあります。

オブジェクトの内容は一連の「質問」オブジェクトであり、簡単にするために「テキスト」属性と「タイプ」属性を持っています。

私が達成しようとしているのは、タイプごとに角度ディレクティブを持ち、これらを適切にレンダリングできるようにすることです。たとえば、サーバーが [{type:'booleanquestion',text:'Is the sky blue?'}] を返した場合、要素を作成すると、booleanquestion ディレクティブが開始され、適切にレンダリングされます。

これまでのところ、うまく機能する「質問セット」ディレクティブを定義し、質問のコレクションを見て、必要なものをコンパイルして、ディレクティブがcorreclt.yを表示するようにしました

HTML

<div questionset="questions"/>

app.js

...
scope.questions = questions; // e.g. [{text: 'some text',type: 'boolean'}]

ディレクティブ.js

angular.module('myApp').directive('questionset',function($compile){
    return {
        transclude: 'true',
        compile: function(element,attr,linker){
            return function($scope,$element,$attr){
                var elements = [],
                    parent = $element.parent();

                $scope.$watchCollection('questions',function(questions){
                    var block, i, childScope;

                    if(elements.length > 0)
                    {
                        for( i = 0; i < elements.length ; i++)
                        {
                            elements[i].el.remove();
                            elements[i].scope.$destroy();
                        }
                        elements = [];
                    }
                    if(!questions) return;

                    for(i = 0; i < questions.length; i++)
                    {
                        childScope = $scope.$new();
                        childScope['question'] = questions[i];
                        var html = '<div class="'+questions[i].type+'"/>';
                        var e = angular.element(html);
                        block = {};
                        block.el = e;
                        block.scope = childScope;
                        $compile(e)(childScope);
                        element.append(e);
                        elements.push(block);
                    }
                });
            }
        }
    }
});

// For example, one type might be "boolean"
angular.module('myApp').directive('boolean',function($compile){
    return {
        restrict: 'AC',
        template: '<div class="question">{{question.text}}</div>',
        replace: true,
        link: function(scope,elem,attrs,ctrl){
            …….
       // for some reason, $compile will not be defined here?
        }
    };
});

これは問題なく動作していますが、2 つの質問があります

1)。これはこれを行うための「正しい」角度の方法ですか? これは私の最初の角度のあるプロジェクトであり、私はかなり深いところに飛び込んだようです (またはとにかくそれがどのように感じられるか)

2)。私の次の目標は、question.text に HTML を含めることができるようにし、それを「コンパイル」することです。たとえば、テキストは

"Is the <strong>sky</strong> blue?"

これを機能させる方法がわかりません-コードのコメントが示唆するように、何らかの理由で $compile がブールディレクティブに挿入されていません。おそらくこれは、その子スコープを手動で作成したためでしょうか? 要素の内容をもう一度 $compile しようとしているのは正しいですか? この最後のビットはおそらく非常に単純だと思いますが、私にはわかりません。

4

1 に答える 1