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.

  • 相关阅读:
    Yii Listview 更新及搜索
    Yii框架CGridView columns中使用数组或变量传值
    冲刺七天---05
    冲刺七天---04
    爱心图书剧本描述
    冲刺七天----03
    冲刺七天---02
    冲刺七天---01
    PSP周总结03
    psp周总结02
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5384874.html
Copyright © 2011-2022 走看看