AngularJS $transclude undefined

Question

I have written a custom directive in AngularJS. And I have to use isSlotFilled method of $transclude. The JavaScript of the directive:

define(['../directives-module'], function (directivesModule, $scope, $transclude) {    
    directivesModule.directive('news', function() {
        return {           
            restrict: 'E',
            replace: true,
            transclude: {
              'heading': 'heading',
              'content': '?content'
            },
            scope: {
                'cmsContent': '@'
            },
            templateUrl: 'directives/news.html',
            link: function(scope, element, attrs, ctrl, transclude){
                console.log($transclude.isSlotFilled(content));
            },
        };
      });    
});

I have tried to output a console.log() to check the method works. The console.log() above does not work, saying:

TypeError: Cannot read property 'isSlotFilled' of undefined

Actually, I have to use this method on the HTML file of the directive. The file news.html contains:

<div class="row">
    <div class="largeText shadow1" ng-transclude="heading"></div>
    <div class="mediumText shadow2" ng-transclude="content"
         ng-class="{'hide' : $transclude.isSlotFilled(content)}">
    </div>
</div>

As you see in the ng-class, it will hide the div if the content slot is not filled. However the condition here inside ng-class always returns false. I'm sure I am missing something at injecting $transclude. What should I do to properly use this method from the news.html?

You're not injecting $transclude to directive, whatever it is. Is it a module? Service? The question says nothing on this. — Estus Flask
– Estus Flask, Commented Mar 29, 2016 at 10:38

nej_simon · Accepted Answer · 2016-04-14 09:06:14Z

2

I'm not sure what you're attempting to do using your module system but in any case: $transclude is not a service but a function that's injectable to directive and component controllers. The same goes for $scope.

The link function gets called with the transclude function so you may use it directly. Also remember to put quotes around content.

define(['../directives-module'], function (directivesModule) {    
    directivesModule.directive('news', function() {
        return {           
            restrict: 'E',
            replace: true,
            transclude: {
              'heading': 'heading',
              'content': '?content'
            },
            scope: {
                'cmsContent': '@'
            },
            templateUrl: 'directives/news.html',
            link: function(scope, element, attrs, ctrl, transclude){
                console.log(transclude.isSlotFilled('content'));
            },
        };
      });    
});

To access it in a template you can add it as a property to the scope. You can do that in the link function if you want:

function(scope, element, attrs, ctrl, transclude){
    console.log(transclude.isSlotFilled('content'));
    scope.transclude = transclude;
}

// Or maybe
function(scope, element, attrs, ctrl, transclude){
    console.log(transclude.isSlotFilled('content'));
    scope.hasContent = transclude.isSlotFilled('content');
}

answered Apr 14, 2016 at 9:06

nej_simon

1717 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Peter Nixey Over a year ago

THANK YOU. I could not for the life of my figure out how to get hold of that transclude function

Peter Nixey Over a year ago

it's not my question but I'm sure @Faruk Yazıcı can help you

Collectives™ on Stack Overflow

AngularJS $transclude undefined

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related