Angular.js: ng-transclude doesn't work inside ng-switch-default

Created on 15 Nov 2013  路  11Comments  路  Source: angular/angular.js

When nesting ng-transclude inside an ng-switch-default directive the following error is produced:

Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found.

Here it is reproduced:
http://plnkr.co/edit/3CEj5OY8uXMag75Xnliq?p=preview

$compile low investigation bug

Most helpful comment

Hi,
the problem is that ng-switch is using a transclude as well, which leads to the error.

In your case, you should create a new directive that uses the right $transclude function. For this to work, store the $transclude in the controller of your parent directive (in your case field), and create a new directive that references that controller and uses its $transclude function.

In your example:

.directive('field', function() {
  return {
       ....
      controller: ['$transclude', function($transclude) {
        this.$transclude = $transclude;
      }],
      transclude: true,
       ....
  };
})
.directive('fieldTransclude', function() {
  return {
    require: '^field',
    link: function($scope, $element, $attrs, fieldCtrl) {
      fieldCtrl.$transclude(function(clone) {
        $element.empty();
        $element.append(clone);
      });
    }
  }
})

In the html, you then just use <div field-transclude> instead of <div ng-transclude>.

Here is an updated plunker: http://plnkr.co/edit/au6pxVpGZz3vWTUcTCFT?p=preview

Closing this as not a bug. Sorry for the late answer and please comment if you think I understood you incorrectly.

All 11 comments

Confirmed this is an issue on 1.2.7 as well.

+1

+1

+1 from here

Hi,
the problem is that ng-switch is using a transclude as well, which leads to the error.

In your case, you should create a new directive that uses the right $transclude function. For this to work, store the $transclude in the controller of your parent directive (in your case field), and create a new directive that references that controller and uses its $transclude function.

In your example:

.directive('field', function() {
  return {
       ....
      controller: ['$transclude', function($transclude) {
        this.$transclude = $transclude;
      }],
      transclude: true,
       ....
  };
})
.directive('fieldTransclude', function() {
  return {
    require: '^field',
    link: function($scope, $element, $attrs, fieldCtrl) {
      fieldCtrl.$transclude(function(clone) {
        $element.empty();
        $element.append(clone);
      });
    }
  }
})

In the html, you then just use <div field-transclude> instead of <div ng-transclude>.

Here is an updated plunker: http://plnkr.co/edit/au6pxVpGZz3vWTUcTCFT?p=preview

Closing this as not a bug. Sorry for the late answer and please comment if you think I understood you incorrectly.

@tbosch I think this is a bug. What you described is a workaround.

@vojtajina Do you mean we should have a general solution for this, e.g. allow ng-transclude directive to define the transclude it should use, or only make ng-transclude work nicely with directives that are part of angular core (like ng-switch, ng-if, ng-repeat, ...)?

Note: #7387 was never merged.

can we reopen this? it's not fixed

@chiptus, it seems pretty fixed to me (up until v1.5.5): http://plnkr.co/edit/M5vcubGIDkKuCeDqD4cc?p=preview
If you think you have found a bug, please open a new issue, providing the necessary details (e.g. expected vs actual behavior, a demo, steps to reproduce etc). Thx !

Was this page helpful?
0 / 5 - 0 ratings

Related issues

coli picture coli  路  60Comments

guruward picture guruward  路  145Comments

coli picture coli  路  62Comments

cgross picture cgross  路  194Comments

hyusetiawan picture hyusetiawan  路  235Comments