[AngularJS] Angular 1.5 $transclude with named slot

In Angular 1.5, there is no link and compile. So use if you transclude, you cannot access the fifth arguement in link function, which is transcludeFn.

 

But in v1.5, you can access $transclude in controller. 

And what you can do for that is check whether the transclude element is passed in or not. For that you also need to use named slot, not default transclude: true.

 

See example:

class ServiceListController {
    constructor($transclude) {
        this.$transclude = $transclude;
    }

    hasTransclude(){
        return this.$transclude.isSlotFilled('actions');
    }
}

const clmServiceListComponent = {
    bindings: {
       ...
    },
    transclude: {
        'actions': '?clmActions'
    },
    controller: ServiceListController,
    controllerAs: 'vm',
    template: require('./service-list.html')
};

export default (ngModule) => {
    ngModule.component('clmServiceList', clmServiceListComponent);
}
    

In the example, we has a directive call 'clmActions', and gave slot name as 'actions'.

So you can use:

this.$transclude.isSlotFilled('actions');

to check whether the transclude element is defined or not.

 

In HTML:

<clm-service-list>
      <clm-actions>
           <clm-action ></clm-action>
       </clm-actions>
</clm-service-list>

If we gave the clm-actions tag, the hasTransclude() function in controller will return 'true', if you remove clm-actions tag, the function will return false.