zoukankan      html  css  js  c++  java
  • [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.

  • 相关阅读:
    九.Protobuf3特殊类型
    八.Protobuf3更新消息类型(添加新的字段)
    七.Protobuf3 嵌套类型
    六.Protobuf3引入其他.proto文件
    五.Protobuf3 枚举
    四.Protobuf3 缺省值
    VC 在调用main函数之前的操作
    Windows下的代码注入
    C 堆内存管理
    VC++ 崩溃处理以及打印调用堆栈
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5384874.html
Copyright © 2011-2022 走看看