[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.
[AngularJS] Angular 1.5 $transclude with named slot的更多相关文章
- [UE4]Named Slot
用户创建的UI成为其他UI的子控件的时候,默认情况下是不能拥有子控件的,给UI添加一个Named Slot,这个UI就可以拥有子控件 一.创建一个名为testNameSlot的UI,添加3个Named ...
- [AngularJS] Angular 1.5 multiple transclude
If you know ui-router, multi-transclude should be easy for you also. In previou Angular version < ...
- [Angularjs]angular ng-repeat与js特效加载先后导致的问题
写在前面 最近在项目中遇到这样的一个前端的bug,在ng-repeat中绑定的图片,有一个晃动的特效,在手机端浏览的时候,图片有时候会正常展示,有时就展示不出来.当时猜测是因为angularjs与特效 ...
- [AngularJS] Angular 1.3 ngMessages with ngAnimate
Note: Can use $dirty to check whether user has intracted with the form: https://docs.angularjs.org/a ...
- [AngularJS] Angular 1.3 $submitted for Form in Angular
AngularJS 1.3 add $submitted for form, so you can use $submitted to track whether the submit event ...
- [AngularJS] Angular 1.3 Anuglar hint
Read More: http://www.linkplugapp.com/a/953215 https://docs.google.com/document/d/1XXMvReO8-Awi1EZXA ...
- [AngularJS] Angular 1.3 ng-model-options - getterSetter
getterSetter: boolean value which determines whether or not to treat functions bound to ngModel as ...
- [AngularJS] Angular 1.3: ng-model-options updateOn, debounce
<!DOCTYPE html> <html ng-app="app"> <head lang="en" > <meta ...
- AngularJs angular.identity和angular.noop详解
angular.identity 函数返回本身的第一个参数.这个函数一般用于函数风格. ----------以上是官网对该接口的说明,只能说这个文档写得也太二,让人完全看不懂.要理解它的用途,可直接看 ...
随机推荐
- YII框架路由和URL生成
路由和URL生成 当一个YII应用开始处理一个请求的时候,它首先要做的便是将请求的URL转化成一个路由.路由的作用是用于后续实例化相应的控制器和操作,以便处理请求,整个处理过程便叫做路由.路由的逆过程 ...
- Topshelf
Topshelf允许开发者创建一个简单的控制台程序,将其安装为一个window服务. 这样做的原因很简单:方便调试. 使用命令行工具可以很方面的安装Topshelf创建的服务. server.exe ...
- jQuery验证框架 .
目录视图 摘要视图 订阅 “程序人生”中国软件开发者职业生涯调查 CSDN社区“三八节”特别活动 开发者职业生涯调查之未来 jQuery验证框架 分类: JQuery 2 ...
- PHP preg_match正则表达
在php中preg_match()函数是用来执行正则表达式的一个常用的函数,下面我来给大家详细介绍preg_match使用方法. 函数用法 int preg_match_all ( string pa ...
- mysql死锁--源于外键关联
死锁 存在于行级锁 存在的条件 1.资源只能同时被一个线程占有 2.资源占有不能被强制剥夺 3.请求和保持占有(在请求占有资源的同时能保持现有资源的占有) 4.死循环(一般做程序的人最关注的点) 一到 ...
- 单点登录CAS使用记(五):cas-client不拦截静态资源以及无需登录的请求。
一.问题在哪? 在配置cas-client中,有这么一段配置: <filter> <filter-name>CAS Filter</filter-name> < ...
- C++拾遗(七)函数相关(2)
内联函数 内联函数与常规函数的区别在于: 1.常规函数:在执行调用指令时,先存储该指令的内存地址,将函数参数复制到堆栈,然后跳转到被调用函数起点的内存单元,执行函数,将返回值放 入寄存器,最后跳回到一 ...
- assert实现
测试网站在国内国外的访问速度 关于C的右左法则 assert宏的实现(一道笔试题) 2010-11-09 13:05:48| 分类: c | 标签: |举报 |字号大中小 订阅 asser ...
- IE9的BUG?jQuery的BUG?
本文转载自http://big-student.iteye.com/blog/1898213 在IE9和IE10中,当对一个html的样式初始了一个很大的left或者top时,使用jQuery的off ...
- Oracle数据库之PL/SQL异常处理
Oracle数据库之PL/SQL异常处理 异常指的是在程序运行过程中发生的异常事件,通常是由硬件问题或者程序设计问题所导致的. PL/SQL程序设计过程中,即使是写得最好的程序也可能会遇到错误或未预料 ...