[AngularJS] Angular 1.5 $transclude with named slot

最新推荐文章于 2025-09-12 14:04:02 发布

weixin_30271335

最新推荐文章于 2025-09-12 14:04:02 发布

阅读量85

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/5384874.html

本文详细介绍了在Angular1.5版本中如何使用并检查transclude功能，包括如何通过控制器访问传入元素，以及如何使用named slot而非默认transclude来检查transclude元素是否被定义。

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.

转载于:https://www.cnblogs.com/Answer1215/p/5384874.html