Angular JS ng-switch with ng-include?

Question

I have 3 different code fragments which I'd like to swap out depending on the selection in a select menu.

It works if I include the code inline, but when I try to use ng-includes like this, I get an Angular error and the app fails:

      <div ng-switch on="pFilter">
      <div ng-include="'includes/parcel_details_incoming.html'" ng-switch-when="Incoming Parcels"></div>
      <div ng-include="'includes/parcel_details_forward.html'" ng-switch-when="Exception Parcels"></div>
      <div ng-include="'includes/parcel_details_exception.html'" ng-switch-default></div>
      </div>

What am I doing wrong here? Does ng-switch not work with ng-includes?

Answer 1

The reason is both the directives ng-include and ng-switch-x use transclusion and you are specifying both on the same element and it is not allowed. Move nginclude to the child of ng-switch element.

   <div ng-switch on="pFilter">
      <div  ng-switch-when="Incoming Parcels"><div ng-include="'includes/parcel_details_incoming.html'"></div></div>
      <div  ng-switch-when="Exception Parcels"><div ng-include="'includes/parcel_details_forward.html'"></div></div>
      <div  ng-switch-default><div ng-include="'includes/parcel_details_exception.html'"></div></div>
   </div>

This used to work until angular 1.x version but compound transclusion will result in multidir error starting 1.2.x version of angular. Take a look at the change log and this commit.