[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 ...
随机推荐
- Linux常用命令之 查找命令 find —— 细说 -atime，-mtime，-ctime
我们知道 Linux里面一切皆文件 ,那么我们能否查看一个文件是何时创建的呢?答案是否定的.那我们可以知道些文件关于时间的什么信息呢?那就不得不说文件状态的三个时间了,它们分别是 -atime, -c ...
- mvc自带的异步表单提交
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- hdu 1042
貌似之前也写过这个题目的解题报告...老了,记性不好 从贴一遍吧! 代码理解很容易 AC代码: #include <iostream> #include <stdio.h> # ...
- hibernate连接数据库，进行操作的步骤
//初始化 Configuration conf=null; SessionFactory sf=null; Session session=null; Transaction tx=null; tr ...
- SQLServer2008/2012 删除所有表视图存储过程
SQLServer2008/2012 删除所有表视图存储过程 -------------------删除所有的表-------------------use xuwenbin111--/第1步**** ...
- C# - CSV(Comma-Separated Values)文件读取.
using System; using System.Collections.Generic; using System.Diagnostics; using System.IO; using Sys ...
- 关于R文件丢失的一个问题
android studio在编辑布局文件时,一般为了省事,如TextView控件中的text属性这样写 android:text="<500",编译不会报错,但是运行时会出 ...
- poj3282
定义一个有4x+1组成的无限集合x>0&x∈Z 素数 x 不能有x = y*z,y,z都是素数 合数 x 有x = y*z y|z中某个数是素数 simi数,只能由两个素数构成. 打 ...
- （原）ubuntu14.04中安装gcc4.9和g++4.9
http://stackoverflow.com/questions/28683747/installing-gcc4-9-on-ubuntu-14-04-lts http://askubuntu.c ...
- mysql中取系统当前时间
<select id="getFreightEfclInventoryList" parameterType="long" resultMap=" ...