[AngularJS] Angular 1.5 multiple transclude
If you know ui-router, multi-transclude should be easy for you also. In previou Angular version <1.4, one diretive can only have one transclude element. But now in Angular 1.5, you can give each transclude element a name, then you can have multi-transcluded elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/angular/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="app">
<ng-details>
<detail-title>Details</detail-title>
<detail-content-text >This is text content</detail-content-text>
</ng-details>
</body>
</html>
var app = angular.module('app', []);
app.directive('ngDetails', function () {
return {
restrict: 'E',
scope: {},
transclude: {
'title': 'detailTitle', // title: used in directive template, detailTitle: used in app html
'textContent': 'detailContentText'
},
controller: function(){
this.toggle = true;
this.toggleIt = function(){
this.toggle = !this.toggle;
}
},
controllerAs: 'vm',
template: [
'<div class="details">',
'<div class="summary" ng-click="open = !open">',
'{{ open ? \'▾\' : \'▸\' }}',
'<span ng-transclude="title">default title</span>',
'</div>',
'<div class="content" ng-if="vm.toggle" ng-show="open" ng-transclude="textContent">default text</div>',
'</div>'
].join('')
};
});
This can make html code lot more easy to follow.
Another benefit is we can choose which element to be transcluded into our template:
<ng-details>
<detail-title>Details</detail-title>
<detail-content-text >This is text content</detail-content-text>
<detail-content-image >Sorry there is no image</detail-content-image>
</ng-details>
In app html, we add one more transclude element: detail-content-image, but it is not yet showing on the page.
var app = angular.module('app', []);
app.directive('ngDetails', function () {
return {
restrict: 'E',
scope: {},
transclude: {
'title': 'detailTitle',
'textContent': 'detailContentText',
'imageContent': 'detailContentImage',
},
controller: function(){
this.toggle = true;
this.toggleIt = function(){
this.toggle = !this.toggle;
}
},
controllerAs: 'vm',
template: [
'<div class="details">',
'<div class="summary" ng-click="open = !open">',
'{{ open ? \'▾\' : \'▸\' }}',
'<span ng-transclude="title">default title</span>',
'</div>',
'<div class="content" ng-if="vm.toggle" ng-show="open" ng-transclude="textContent">default text</div>',
'<div class="content" ng-if="!vm.toggle" ng-show="open" ng-transclude="imageContent">default image</div>',
'</div>',
'<button ng-click="vm.toggleIt()">Toggle it: {{vm.toggle}}</button>'
].join('')
};
});
So, based on the toggle button, the template can choose which element to transclude into the template.
---------------------------------
Component refactor:
[AngularJS] Angular 1.5 multiple transclude的更多相关文章
- [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 ...
- angular 自定义指令 directive transclude 理解
项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...
- 浅析AngularJS自定义指令之嵌入(transclude)
AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...
- [AngularJS] Angular 1.3 Anuglar hint
Read More: http://www.linkplugapp.com/a/953215 https://docs.google.com/document/d/1XXMvReO8-Awi1EZXA ...
- AngularJS学习---Routing(路由) & Multiple Views(多个视图) step 7
1.切换分支到step7,并启动项目 git checkout step- npm start 2.需求: 在步骤7之前,应用只给我们的用户提供了一个简单的界面(一张所有手机的列表),并且所有的模板代 ...
- [Angularjs]angular ng-repeat与js特效加载先后导致的问题
写在前面 最近在项目中遇到这样的一个前端的bug,在ng-repeat中绑定的图片,有一个晃动的特效,在手机端浏览的时候,图片有时候会正常展示,有时就展示不出来.当时猜测是因为angularjs与特效 ...
- angular高级篇之transclude使用详解
angular指令的transclude属性是一个让初学者比较难以理解的地方,transclude可以设置为false(默认),true或者对象三种值,如果不设该属性就默认为false,也就是说你不需 ...
- [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 ...
随机推荐
- jQuery mouseover,mouseout事件多次执行的问题处理
控制鼠标移上移下事件,在使用Jquery 的mouseover,mouseout事件时,元素内部含有其它元素,会造成该事件多次的触发的情况. 问题解析 在用到mouseover和mouseout事件来 ...
- CVE-2015-8660分析
0x00测试环境 使用环境 备注 操作系统 Ubuntu15.04 虚拟机 内核版本 3.19.0-15-generic 漏洞来源 /fs/overlayfs/inode.c Before 201 ...
- display属性解析
none 此元素不会被显示 block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-block 行内块元素.(C ...
- Messager( 消息窗口) 组件
一． 加载方式消息窗口提供了不同的消息框风格,包含 alert(警告框).confirm(确认框).prompt(提示框).progress(进度框)等.所有消息框都是异步的,用户可以在交互消息之后使 ...
- django: db - many to one
models 模块中的对象有三种对应关系:多对一,多对多,一对一.本讲说明多对一关系. blog/models.py: from django.db import models class Emplo ...
- Asp.net - The type or namespace name 'App_Code' does not exist in the namespace 'xxx' (are you missing an assembly reference?)
我在 项目 下面创建一个 App_Code的文件夹,然后在其下创建自定义的类,但是当我在该项目下别的地方使用时报错: The type or namespace name 'App_Code' doe ...
- Xcode itunes完美打包api方法
转:http://bbs.csdn.net/topics/390948190 Xcode6 itunes完美打包api 方法! 特点轻盈小巧,方便快捷!
- effective条款15,在资源管理类中小心copying行为
class A { private: int *p; void lock(){ cout << p << "is lock" << endl; ...
- OpenSceneGraph FAQ
转自http://www.cnblogs.com/indif/archive/2011/04/22/2024805.html 1.地球背面的一个点,计算它在屏幕上的坐标,能得到吗? 不是被挡住了吗? ...
- Go语言之defer
defer语句被用于预定对一个函数的调用.我们把这类被defer语句调用的函数称为延迟函数.注意,defer语句只能出现在函数或方法的内部. 一条defer语句总是以关键字defer开始.在defer ...