I'm trying to create a conditional nested directive. The goal is to print a form with wizardmode or the full form.
For the wizard I use https://github.com/mgonto/angular-wizard
my html site:
<wizard on-finish="saveit()">
<div ng-repeat="element in filtered = (lang | langFilter:data.review.form_elements) | orderBy:'element_order'">
<div btwizard></div>
</div>
</wizard>
First directive:
app.directive "btwizard", [ "$compile", ($compile) ->
transclude: true
scope: false
replace: false
templateUrl: "/assets/template/review_form.html"
link: (scope,element,attrs,ctrl, transclude) ->
if (scope.data.review.config.wizardmode)
element.find('inner').replaceWith(element.children())
$compile(element.contents())(scope)
return
]
The templateUrl is:
<inner>
<div class="row">
someform html
</div>
</inner>
I'm trying to replace <inner>
with the contents of the url elemenet.children()
depending on the wizardmode
value
the second directive replaces <inner>
with the wizardsteps html:
app.directive "inner", [ "$compile", ($compile) ->
restrict: "E"
replace: false
scope: false
transclude: true
template: "<wz-step title='Starting'><div ng-transclude></div></wz-step>"
]
How can I achieve this?
Update: I made a plunkr: http://plnkr.co/edit/qOhZuVyi3oUVWBftIxBV?p=preview
Thanks, Patrick