Why ng-transclude's scope is not a child of its directive's scope - if the directive has an isolated scope?

Solution 1:

Why ng-transclude's scope is not a child of its directive's scope if the directive has an isolated scope?

ng-transclude designed to allow directives to work with arbitrary content, and isolated scopes are designed to allow directives to encapsulate their data.

If ng-transclude didn't preserve scopes like that, any arbitrary content that you're transcluding would need to know the implementation details of your directive (i.e. it would need to know what's available on the isolated scope you created).

If it's not a bug, how can a container directive pass data to it's content, if not by setting attributes like I tried.

If the container directive and contained directives are coupled - i.e. you wrote both of them and need them to act together - then they should communicate via a shared controller.

If the container directive is supposed to inject content into the scope of the children (e.g. ng-repeat), then you shouldn't be using an isolated scope.

The angular documentation is quite clear on what the behaviour is supposed to be:

"In a typical setup the widget creates an isolate scope, but the transclusion is not a child, but a sibling of the isolate scope. This makes it possible for the widget to have private state, and the transclusion to be bound to the parent (pre-isolate) scope."

Solution 2:

you can manually transclude the child element

link: function(scope, element, attrs, ctrl, transclude) {
    transclude(scope, function(clone, scope) {
        element.find('.transclude-placeholder').append(clone);
    });
}