1

私のAngularアプリケーションには、共有構造、同一のhtmlを持ついくつかのパネルがあります。

パネル内では、コンテンツと動作が変更されます。基本的に、それぞれが個別のディレクティブです。それらを panel-content と呼びましょう。

これは私が最適だと思う解決策に近いですが、アーキテクチャ上の疑問がいくつかあります。

私はディレクティブを持っているので（transclude trueセットを持っています）：

<panel></panel>

テンプレートは次のようになります。

<div>
    Content
    <ng-transclude></ng-transclude>
</div>

パネルを繰り返す必要があります

<ul>
    <li ng-repeat="panel in panels">
        <panel>
            <panel-content></panel-content>
        </panel>
    </li>
</ul

これはすべて問題ありませんが、表示する必要がある各反復で「選択」する合理的な方法は何でしょう<panel-content>か?

私が使用できるものを持っているとしましょうpanel.id。

いくつかの方法でそれを実現できることに気付きまし<panel-content>た。パネル ID を使用してビュー内で ng-switch を実行できますpanel.id。

しかし、何らかの理由で、もっと簡単なものが欠けていると確信していますか?

このアーキテクチャは決まったものではないことに注意してください。私のニーズにより適した別の構造があれば教えてください。

もう一度質問ですが、どのように選択すればよいでしょうか。というか、表示するものを誰が選択するか<panel-content>。

4

1 に答える 1

3

私があなたを正しく理解していればng-include、テンプレートを次のように毎回変更する in ディレクティブを使用しidます。

何かのようなもの：

<ul>
    <li ng-repeat="panel in panels">
        <panel type-id="panel.id">
        </panel>
    </li>
</ul>

および指令:

app.directive('panel', 
 function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<ng-include src="getTemplateUrl()"/>',


        link: function(scope,elem,attrs) {

           scope.getTemplateUrl = function() {

                var url;

                if(attrs.typeId !== undefined){
                    var url =  $rootScope.list_templates[attrs.typeId].value; // TODO: add validation
                  }


                return url;
            };
         }
      });

アプリ

 $rootScope.list_templates = [
   { id: 0, value: 'partials/upcoming_0.html'},
   { id: 1, value: 'partials/upcoming_1.html'},
   { id: 2, value: 'partials/upcoming_2.html'}
];
于 2015-04-10T12:13:09.933 に答える