Is it possible for the transclusion scope to access the directive scope

Question

Continuing the discussion in Confused about Angularjs transcluded and isolate scopes & bindings

<controller>

  <directive>

     transcluded html

  </directive>

</controller>

With the above general structure in the app, it is implied in the linked discussion that transclusion scope is basically inherited from parent scope(controller) and that transclusion scope cannot access the directive scope. The article explaining this is http://angular-tips.com/blog/2014/03/transclusion-and-scopes/

My question is - Is it possible for the transclusion scope to access the directive scope?

according to the above article, this should be possible if we use transclude function within the link function of the directive and write code as:

transclude(scope, function(clone, scope) {
    element.append(clone);
  });

Does this actually work? I tried the same on my app, but it is not working. Here is the code that I have been using.

Directive definition:

(function(){
    'use strict';

    angular.module('checkoutApp')
        .directive('wizardCard', ['shipToService','deliveryService','billingService', wizardCardDirective]);


    function wizardCardDirective(shipToService,deliveryService,billingService){
        return {
            restrict : 'E',
            scope : {
               current : '@',
               checkoutStates: '='
            },
            transclude:true,
            templateUrl: '/UsabilitySites/Cart/Checkout/app/components/shared/wizard-card.html',
            link: function(scope, element, attrs,ctrl,transclude){


                scope.bla == "ajcnasc";

                transclude(scope, function(clone, scope) {
                    element.append(clone);
              });


            }

        };
    }

})();

wizard-card.html -

<div class="wizardContainer">
   {{bla}}
</div>

scope variable scope is coming as just empty when opening the html. Can someone tell me why this is happening?

THE ABOVE QUESTION WAS SOLVED UPDATING WITH NEW QUESTION :

Now i tried doing this with multi-slot transclusion, it is not working.

Directive definition:

(function(){
    'use strict';

    angular.module('checkoutApp')
        .directive('wizardCard', [wizardCardDirective]);


    function wizardCardDirective(){
        return {
            restrict : 'E',
            scope : {
               current : '@',
               checkoutStates: '='
            },
            transclude: {
                'completed': 'completed',
                'inprogress': 'inprogress'
              },
            templateUrl: 'wizard-card.html',
            link: function(scope, element, attrs,ctrl,transclude){

                scope.bla = "ajcnasc";

                transclude(scope, function(clone, scope) {
                        element.append(clone);
                  });


            }

        };
    }

})();

wizard-card.html -

 <div class="wizardContainer">
    <div ng-transclude="completed">
    </div>

    <div ng-transclude="inprogress">
   </div>
</div>

directive being used -

<wizard-card current="shipping" checkout-states="checkoutStates">
    <completed>
        bla {{bla}}

    </completed>

    <inprogress>
        {{bla}}
    </inprogress>

</wizard-card>

This is giving me an blank as well and the scope.$id is giving me another value (different from the directive).

According to the concept, it should work the same way for multi-slot transclusion. But i cant figure out why its not working with this code.

Answer 1

For debugging purposes, you can put {{$id}} in your template. That will expose the scope ID if $interpolation is working properly.

You erroneusly used double equals ==. Instead do scope.bla = "ajcnasc". The DEMO on JSFiddle.

Is it possible to bind transcluded elements to the directive scope?

Yes.

The ng-transclude directive used in a directive template will bind to the parent scope of the directive. But by doing the transclusion in the directive's linking function using the directive's own scope, you can bind the transcluded elements to the directive scope.