[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 ...
随机推荐
- USB HID介绍
HID是一种USB通信协议,无需安装驱动就能进行交互,在学习HID之前,先来复习一下USB协议的相关内容. USB设备描述符-概述 当插入USB设备后,主机会向设备请求各种描述符来识别设备.那什么是设 ...
- solr创建新的Core
1. 在example目录下创建taotao-solr文件夹: 2. 将./solr下的solr.xml拷贝到taotao-solr目录下: 3. 在taotao-solr下创建taotao目录 ...
- java基础之导出(Excel)
function exportExcel() { $.messager .confirm( '提示信息', '您确定要导出到Excel?', function(r) { if (r) { var co ...
- C# 还原SQL数据库（非存储过程方式）
Winform的代码,最好是在数据所在电脑上运行代码,不然会因为权限问题导致失败. 数据库备份: SqlConnection con = new SqlConnection("Data So ...
- 一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- html禁止手机页面放大缩小
html禁止手机页面放大缩小 <meta name="viewport" content="width=device-width,minimum-scale=1.0 ...
- 解决VS2008闪退的问题
问题:打开VS2008项目后,应该是加载完所有文件,立即断掉了IDE,查看事件器,发现图片中的错误描述,google了很久没有找到解决方案,后来还是自己动手解决这个问题花了一早上的时间,哎,只要把工程 ...
- ORACLE之SQL语句内部解析过程【weber出品】
一.客户端通过监听连接到数据库,数据库开启一个server process进程来接收客户端传过来的sql. 1.这条sql语句从来都没有被执行过.(硬解析) 2.这条sql语句被执行过.(软解析) 二 ...
- MySQL 大DML操作建议
㈠ 大数据量INSERT ⑴ 使用多行插入代替单行:insert into t values (),(),(),... ⑵ LOAD DATA INFILE ... ...
- 乱七八糟 Nodejs 系列一：试水
看Nodejs比较舒服的人,个人认为主要是: 以前是后端,转成前端的人: 前端巨牛的人: 后端巨牛的人: 巨牛的人... 当然还有我这种,脑抽不止的人~~ 不过学习的过程中发现,如果不是上来就用exp ...