javascript - Angular JS ng-switch with ng-include? - Stack Overflow

admin管理员组

文章数量:1302302

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_ining.html'" ng-switch-when="Ining 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?

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_ining.html'" ng-switch-when="Ining 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?

• javascript
• angularjs
• angularjs-directive

Share Follow edited Jan 25, 2015 at 2:54 PSL 124k2121 gold badges256256 silver badges243243 bronze badges asked Jan 25, 2015 at 2:42 SteveSteve 14.9k3737 gold badges138138 silver badges245245 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

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="Ining Parcels"><div ng-include="'includes/parcel_details_ining.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 pound transclusion will result in multidir error starting 1.2.x version of angular. Take a look at the change log and this mit.

本文标签： javascriptAngular JS ngswitch with ngincludeStack Overflow