CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangular-ui-router
Mike
Mike

Reputation: 2703

Illegal use of ngTransclude directive with UI Router and angular-wizard

I'm using angular-wizard in a project with UI-router, you can see a demo if you click the "Create" button on the right:

http://plnkr.co/edit/XYUamusHru7eV0nvAD5i?p=preview

The wizard works fine separately from the current project, problems happen when I try to integrate it into my app I get this error in the console:

Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: <div class="steps" ng-transclude="">

I think this has to do with the templating logic in UI-Router, or it could be the way the directive is written creates "orphans". Anyone have any ideas on what the problem is?

Upvotes: 0

Views: 350

Answers (1)

jhsu
jhsu

Reputation: 333

looks like your NewCampaign.html is using some copy+pasted dom since it has angular comments in there <!-- ngIF ... -->

once cleaning up the template, you can see that the wizard directive isn't being used in that template. The wz-step directive needs to be in the context of a wizard directive since the transclude happens inside the wz-step.

Also, removed the extra ng-app and ng-controller from the template. The controller should be defined along with the state. Check out the fixed plunkr here: http://plnkr.co/edit/c3fcV5RSUMXGIFpk8AbV?p=preview

Upvotes: 2

Related Questions