Access $scope of Component within Transclusion in AngularJS 1.5

Question

How can I make the $scope of a component accessable within transclusion area of that component? here an example:

<test>
   {{myVar}}
</test>    

.component('test', {
    transclude:true,
    template:'<ng-transclude></ng-transclude>',
    controller:function($scope){

        this.$onInit = function() {
                        $scope.myVar = 1123


        }
    }
})

Answer 1

You may use $parent to access isolated component scope, e.g.:

<test>
    {{ $parent.$ctrl.myVar }}
</test>

.component('test', {
    transclude: true,
    template: '<ng-transclude></ng-transclude>',
    controller: function($scope) {
        var ctrl = this;

        this.$onInit = function() {
           ctrl.myVar = 1123;
        }
    }
})

Or else you may define dedicated transclusion slot:

<test>
    <some-fancy-slot>
        {{ $parent.$ctrl.myVar }}
    </some-fancy-slot>
</test>

.component('test', {
    transclude: {
        slot: 'someFancySlot'
    },
    template: '<div ng-transclude='slot'></div>',
    controller: ...
})