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
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, ...)?
This is fixed by #7387 : http://plnkr.co/edit/BqGa4FU8Int2NkXlCRL1?p=preview
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 !
Most helpful comment
Hi,
the problem is that
ng-switchis using a transclude as well, which leads to the error.In your case, you should create a new directive that uses the right
$transcludefunction. For this to work, store the$transcludein the controller of your parent directive (in your casefield), and create a new directive that references that controller and uses its$transcludefunction.In your example:
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.