Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

ng-transclude doesn't work inside ng-switch-default #4969

Closed
jbro-io opened this issue Nov 15, 2013 · 11 comments
Closed

ng-transclude doesn't work inside ng-switch-default #4969

jbro-io opened this issue Nov 15, 2013 · 11 comments

Comments

@jbro-io
Copy link

jbro-io commented Nov 15, 2013

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

@btford
Copy link
Contributor

btford commented Jan 4, 2014

Confirmed this is an issue on 1.2.7 as well.

@dberringer
Copy link

+1

@tbosch tbosch modified the milestones: 1.2.12, 1.2.11, 1.2.13 Feb 3, 2014
@ofpiyush
Copy link

+1

@btford btford modified the milestones: 1.2.14, 1.2.13 Feb 15, 2014
@marbetschar
Copy link

+1 from here

@IgorMinar IgorMinar modified the milestones: 1.3.0-beta.1, 1.2.14 Mar 1, 2014
@btford btford modified the milestones: 1.3.0-beta.2, 1.3.0-beta.1 Mar 10, 2014
@tbosch tbosch modified the milestones: 1.3.0-beta.3, 1.3.0-beta.2 Mar 14, 2014
@btford btford modified the milestones: 1.3.0-beta.4, 1.3.0-beta.3 Mar 24, 2014
@tbosch
Copy link
Contributor

tbosch commented Mar 28, 2014

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.

@vojtajina
Copy link
Contributor

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

@tbosch
Copy link
Contributor

tbosch commented May 14, 2014

@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, ...)?

@petebacondarwin
Copy link
Member

@btford btford removed this from the 1.3.0-beta.9 milestone May 16, 2014
@axelson
Copy link

axelson commented Apr 22, 2015

Note: #7387 was never merged.

@chiptus
Copy link

chiptus commented May 31, 2016

can we reopen this? it's not fixed

@gkalpak
Copy link
Member

gkalpak commented May 31, 2016

@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 !

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.