1

次の基本構造のビューを持つangularjsWebアプリがあります。

<ul>
    <li ng-repeat="entry in entries" ng-switch on="entry.type" logic-options >
         <div ng-switch-when=1 text-entry></div>
         <div ng-switch-when=2 other-entry></div>
    </li>
</ul>

ここで、text-entryとother-entryは、独自のテンプレートを持つディレクティブであり、logic-optionsは、テンプレートとコントローラーを持つ別のディレクティブです。

logic-optionsディレクティブは、子スコープで使用されるいくつかの関数を提供し、replace:falseを持っているため、テンプレートをliの最後に追加する必要があります。text-entryおよびother-entryディレクティブには、他のビューでも使用される挿入されるテンプレートがいくつかあります。

これを実行すると、logic-optionsディレクティブがレンダリングされて機能しているように見えますが、内部ディレクティブ(text-entryおよびother-entry)は機能しません。

コンソールでエラーが発生します:

Error: Argument '?' is required qa@...

このエラーの原因と修正方法を教えてください。

この問題を示すフィドル:http://jsfiddle.net/cubicleWar/c3mTT/1/

4

1 に答える 1

2

子要素をトランスクルージョンする必要があると思います。また、「ng-switch」ディレクティブを別のレイヤーに配置しないようにして、他のディレクティブと競合しないようにすることもできます。

app.directive('logicOption', function() {
  return {
    replace: false,
    transclude: true,
    template: "<div ng-transclude>{{entry.type}} : This is the logic stuff</div>"
  };    
});

http://jsfiddle.net/YusCU/

于 2012-11-22T06:48:10.750 に答える