<!doctype html>
<html lang="en" ng-app="expanderModule">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="lib/angular.js"></script>
<style>
.expander{border:solid 1px black;width: 250px;}
.expander>.title{background-color: black;color: white;padding: .1em .3em; cursor: pointer;}
.expander>.body{padding: .1em .3em;}
</style>
</head>
<body>
<div ng-controller="SomeController">
<expander class="expander" expander-title="title">
{{title}}
</expander>
</div>
<script>
var app = angular.module('expanderModule', []);
app.controller('SomeController', function ($scope) {
$scope.title = '点击展开';
$scope.text = 'This is section !'
})
.directive('expander', function () {
return {
restrict: 'EA',
replace: true,
transclude: true,
scope: {
title: '=expanderTitle'
},
template: '<div><div class="title" ng-click="toggle()">{{title}}</div><div class="body" ng-show="showMe" ng-transclude></div></div>',
link: function (scope, element, attrs) {
scope.showMe = false;
scope.toggle = function () {
scope.showMe = !scope.showMe;
}
}
}
});
</script>
</body>
</html>
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="lib/angular.js"></script>
<style>
.expander{border:solid 1px black;width: 250px;}
.expander>.title{background: black;color: white;padding: .1em .3em;cursor: pointer;}
.expander>.body{padding: .1em .3em;}
</style>
</head>
<body ng-controller="SomeController">
<accordion>
<expander class="expander" ng-repeat="expander in expanders" expander-title="expander.title">
{{expander.text}}
</expander>
</accordion>
<script>
var app = angular.module('myApp', []); app.directive('accordion', function () {
return {
restrict: 'EA',
replace: true,
transclude: true,
template: '<div ng-transclude></div>',
controller: function () {
var expanders = [];
this.gotOpened = function (selectedExpander) {
angular.forEach(expanders, function (expander) {
if (selectedExpander != expander) {
expander.showMe = false;
};
});
}
this.addExpander = function (expander) {
expanders.push(expander);
}
}
}
});
app.directive('expander', function () {
return {
restrict: 'EA',
replace: true,
transclude: true,
require: '^?accordion',
scope: {
title: '=expanderTitle'
},
template: '<div><div class="title" ng-click="toggle()">{{title}}</div><div class="body" ng-show="showMe" ng-transclude></div></div>',
link: function (scope, element, attrs, accordionController) {
scope.showMe = false;
accordionController.addExpander(scope);
scope.toggle = function toggle() {
scope.showMe = !scope.showMe;
accordionController.gotOpened(scope);
}
}
}
});
app.controller('SomeController', function ($scope) {
$scope.expanders = [{title: 'Click me to expand', text: 'Hi there folks, I am the content that was hidden but is now shown.'}, {title: 'Click this', text: 'I am even better text than you have seen previously'}, {title: 'Test', text: 'test'}];
})
</script>
</body>
</html>

angularjs transclude demo的更多相关文章

  1. AngularJS入门-demo

    双向绑定测试: <body ng-app> 请输入姓名:<input ng-model="myname"> <br> {{myname}},你好 ...

  2. angularJS transclude

    参考来源:彻底弄懂AngularJS中的transclusion 对以上文章进行摘录.总结和测试记录 在使用指令的时候,如果想要使用指令中的子元素,那么你就要用transclusion. 指令的DDO ...

  3. AngularJS +HTML Demo

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  4. [AngularJS] Transclude -- using what existing in DOM to replace the template elements in directive

    var app = angular.module("phoneApp", []); app.controller("AppCtrl", function($sc ...

  5. AngularJS transclude 理解及例子

    一.概念理解 transclude可以在指令中让使用者自定义模板,也就是说,指令中模板的一部分,让指令的使用者动态指定:与指定中的Scope属性值为{}时候的作用类似,scope属性让指令使用者动态制 ...

  6. AngularJS入门Demo

    1 :表达式 <html> <head> <title>入门小Demo-1</title> <script src="angular.m ...

  7. AngularJs Test demo &front end MVVM implementation conjecture and argue.

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

  8. angularjs ngRoute demo

    <!doctype html> <html lang="en" ng-app="AMail"> <head> <met ...

  9. angularjs $watch demo

    <!doctype html> <html lang="en" ng-app> <head> <meta charset="UT ...

随机推荐

  1. Kibana4学习<三>

    discover 功能 Discover 标签页用于交互式探索你的数据.你可以访问到匹配得上你选择的索引模式的每个索引的每条记录.你可以提交搜索请求,过滤搜索结果,然后查看文档数据.你还可以看到匹配搜 ...

  2. Shell采集系统cpu 内存 磁盘 网络信息

    cpu信息采集 cpu使用率 采集算法 通过/proc/stat文件采集并计算CPU总使用率或者单个核使用率.以cpu0为例,算法如下: 1. cat /proc/stat | grep ‘cpu0’ ...

  3. js读取屏幕长宽

    网页可见区域宽 document.body.clientWidth 网页可见区域高 document.body.clientHeight 网页可见区域宽(包括边线的宽) document.body.o ...

  4. Android入门视频推荐

      marschen老师的Android入门视频推荐网址: 1.Android应用程序开发视频教程(重制版)第一季 2.Android应用开发视频教程(重制版)第二季 2.marschen老师的个人微 ...

  5. hdu 3879 Base Station 最大权闭合图

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3879 A famous mobile communication company is plannin ...

  6. 【POJ】【3680】Intervals

    网络流/费用流 引用下题解: lyd: 首先把区间端点离散化,设原来的数值i离散化后的标号是c[i].这样离散化之后,整个数轴被分成了一段段小区间. 1.建立S和T,从S到离散化后的第一个点连容量K, ...

  7. AD转换后数字量的处理

    假设模拟输入电压的最大值为5V,A/D转换器件为8位转换. [该转换器的分辨率为1/2n=0.3906%.] [能分辨输入模拟电压变化的最小值为5*0.3906%=19.5mv.] 则模拟电压与数字输 ...

  8. Request/Server的相关topic

    Request---------Server模式 HTTP 协议--------->这个可能返回json, 也可能是HTML HTML页面处理的流程以及资源文件的加载 浏览器最大连接数 js资源 ...

  9. mysql SQLyog导入导出csv文件

    1.选择数据库表 --> 右击属性 --> 备份/导出 --> 导出表数据作为 --> 选择cvs --> 选择下面的“更改” --> 字段 --> 变量长度 ...

  10. HDU1542 Atlantis(矩形面积并)

    #pragma warning (disable:4996) #include<iostream> #include<cstring> #include<string&g ...