Question

I have an angularjs web app which has a view with the following basic structure :

<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>

Here text-entry and other-entry are directives which have there own templates and logic-options is another directive which has a template and controller.

The logic-options directive provides some functions to be used by the child scope and has replace: false so that it should append its template to the end of the li. The text-entry and other-entry directives simply have some templates to be inserted which are also used on other views.

When I run this the logic-options directive will render and seems to function but the inner directives (text-entry and other-entry) will not.

In the console I get the error :

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

What causes this error and how do I correct it?

A fiddle demonstrating this problem : http://jsfiddle.net/cubicleWar/c3mTT/1/

Answer 1

I believe you should be transcluding the child elems, also you may want to avoid
putting ‘ng-switch’ directive in a different layer, so that it would not conflict with
other directives.

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/