Transclusion and scopes in angular: Why is this not working?

Question

I have a very simple setup:

Title in parent (transcluded): {{title}}

and

angular.mo         


        

Answer 1

The scope of the transcluded element is not a child scope of the directive but a sibling one. This is what documentation says:

In a typical setup the widget creates an isolate scope, but the transclusion is not a child, but a sibling of the isolate scope.

The simplest solution in this case how you can access transcuded scope is like this:

.directive('pane', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: {
            title: '@'
        },
        template:
            '
' +
                '
Title in isolated scope: {{title}}
' +
                '
' +
            '
',
        link: function (scope, element, attrs) {
            scope.$$nextSibling.title = attrs.title;
        }
    };
});

Demo: http://plnkr.co/edit/ouq9B4F2qFPh557708Q1?p=preview