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/
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>"
};
});