Using directive's isolated scope inside transcluded element

Question

I am using the controllerAs syntax with my directives. In my understanding after some research (and some scanning through the documentation), transcluded element seems to not inherit the isolate scope due ng-transclude simply appending the element after the directive (being a sibling, such as addressed in this question).

Is there a clean way to use my directive's isolate scope through its transcluded element?

Here's a plunkr for demonstration purposes.

score 0 · Answer 1 · answered Oct 31 '14 at 02:16

0

If I understood correctly, you just need to change to:

<that obj="dis.obj">
    ThatCtrl: {{ dis.obj }}
</that>

Also, you don't need the obj attribute:

<that>ThatCtrl: {{ dis.obj }}</that>

answered Oct 31 '14 at 02:16

Denis C de Azevedo

6,276
2
32
49

I attempted to reproduce my problem in the simplest way. I apologize for that. What if for instance, I had to pass ```dis.obj``` to a directive because it is an API to some methods? – srph Oct 31 '14 at 02:43

score 0 · Accepted Answer · edited May 23 '17 at 12:07

The cleanest way would be to use the transclude parameter in the link function of the directive, as stated here (Transclusions and Scopes by Jesus Rodriguez.

A snippet taken from the source:

.directive('person', function() {
    return {
        restrict: 'EA',
        scope: {
            header: '='
        },
        transclude:true,
        link: function(scope, element, attrs, ctrl, transclude) {
            scope.person = {
                name: 'Directive Joe',
                profession: 'Scope guy'
            };

            scope.header = 'Directive\'s header';
            transclude(scope, function(clone, scope) {
                element.append(clone);
            });
        }
    };
});

the transclude function receives a function and an optional first parameter. What this function does is to clone the transcluded html and then you can do with it what you want. If you put a scope as the first parameter, that scope will be the one used on the cloned element. The callback function of transclude will receive the cloned DOM and also the scope attached to it.

In this case, we are using the directive’s parent scope (in this case the controller’s one) as the scope of the transcluded html and then we are receiving it in the callback function. What we do here is just append it on our directive’s DOM element. In the case we had a template on the directive, we could retrieve a DOM element and then use it to append the transcluded html, that is what I call complete control :)

Also, transcluded elements are appended to the directive, inheriting the parent's $scope instead of the directive's. More information can be found here

Using directive's isolated scope inside transcluded element

2 Answers2