angularjs transclude demo
<!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的更多相关文章
- AngularJS入门-demo
双向绑定测试: <body ng-app> 请输入姓名:<input ng-model="myname"> <br> {{myname}},你好 ...
- angularJS transclude
参考来源:彻底弄懂AngularJS中的transclusion 对以上文章进行摘录.总结和测试记录 在使用指令的时候,如果想要使用指令中的子元素,那么你就要用transclusion. 指令的DDO ...
- AngularJS +HTML Demo
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- [AngularJS] Transclude -- using what existing in DOM to replace the template elements in directive
var app = angular.module("phoneApp", []); app.controller("AppCtrl", function($sc ...
- AngularJS transclude 理解及例子
一.概念理解 transclude可以在指令中让使用者自定义模板,也就是说,指令中模板的一部分,让指令的使用者动态指定:与指定中的Scope属性值为{}时候的作用类似,scope属性让指令使用者动态制 ...
- AngularJS入门Demo
1 :表达式 <html> <head> <title>入门小Demo-1</title> <script src="angular.m ...
- AngularJs Test demo &front end MVVM implementation conjecture and argue.
<!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...
- angularjs ngRoute demo
<!doctype html> <html lang="en" ng-app="AMail"> <head> <met ...
- angularjs $watch demo
<!doctype html> <html lang="en" ng-app> <head> <meta charset="UT ...
随机推荐
- 低功耗（LPS）VLSI 电路设计中的一些注意事项
1. Non-Retention RAM/Register: 如果使用的RAM/Register本身在Power-Down状态下不可以保存自身的状态,那么一定要保证它们在power-up的时候会进行r ...
- bzoj 1015 并查集
逆向思维,先将整张图以最后所有要求的点毁掉的状态建图,然后倒着 加点就行了,用并查集维护连通块 /*************************************************** ...
- AC自动机学习
今天包括这一周开始学习AC自动机了,有点晚,但我感觉努努力还来得及.4月份还得认认真真攻图论,加油! 为2个月后的邀请赛及省赛.东北赛做准备. 推荐AC自动机学习地址:http://www.cppbl ...
- Matlab稀疏矩阵
一.矩阵存储方式 MATLAB的矩阵有两种存储方式,完全存储方式和稀疏存储方式 1.完全存储方式 将矩阵的全部元素按列存储,矩阵中的全部零元素也存储到矩阵中. 2.稀疏存储方式 仅存储矩阵所有的非零元 ...
- matrix_last_acm_3
the first CCPC password 123 A http://acm.hust.edu.cn/vjudge/contest/view.action?cid=97380#problem/ ...
- JS语句循环（100以备奇偶数、100以内与7先关的数、100以内整数的和、10以内阶乘、乘法口诀、篮球弹起高度、64格子放东西）
3.循环 循环是操作某一个功能(执行某段代码). ①循环四要素: a 循环初始值 b 循环的条件 c 循环状态 d 循环体 ②for循环 a 穷举:把所有的可能性的都一一列出来. b 迭代:每次循环都 ...
- aspx文件、aspx.cs文件、aspx.designer.cs文件之讲解
.aspx文件:(页面)书写页面代码.存储的是页面design代码.只是放各个控件的代码,处理代码一般放在.cs文件中. .aspx.cs文件:(代码隐藏页)书写类代码.存储的是程序代码.一般存放与数 ...
- WPF 与Surface 2.0 SDK 亲密接触 - ScatterView 数据绑定篇
与我们常用的一些WPF 控件相同,ScatterView 控件也支持数据绑定功能.本篇将演示如何利用ScatterView 绑定Win7 系统中的样例图片,并且每张图片会以独立的ScatterView ...
- 表单中<form>的enctype属性
application/x-www-form-urlencoded.multipart/form-data.text/plain 上传文件的表单中<form>要加属性enctype=&qu ...
- （转载）李剑英的CSLight入门指南结合NGUI热更新
原地址:http://www.xuanyusong.com/archives/3075 李剑英的CSLight入门指南文档撰写者:GraphicQQ: 1065147807 一． CSLIGHT 作者 ...