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 ...
随机推荐
- 关于ASCII、GB231、GBK、UTF-8/UTF8、ANSI、unicode的学习笔记
继续上次的学习内容,写一些自己学习的笔记吧!总是觉得没有笔记的学习总是不那么踏实,我承认自己是个记忆力很差的人,特别羡慕那些可以把自己学过的东西记得很牢靠的人.哎!可惜我不是,那只能做出来点东西,就算 ...
- 802.11 wireless 四
802.11 wireless 4spread spectrum(扩频 - 基于香农定理的算法)1.窄带和扩频是发送信号的两种不同方式2.扩频技术使用更小的能量在波峰3.带宽的需要,基于发送数据的量频 ...
- 【转载】Oracle实例和Oracle数据库(Oracle体系结构)
免责声明: 本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除. 原文作者:Leshami 原文地址:http://blog.csdn.net/ ...
- shell编程之分隔符
1 #!/bin/bash 2 line="root:x:0:0:root:/root:bin/bash" 3 oldIFS=$IFS 4 IFS=":" 5 ...
- Orchard中文学习视频录制完成
Orchard学习视频已登录百度传课: http://www.chuanke.com/3027295-124882.html http://pan.baidu.com/s/13zc0u 1.orcha ...
- File not found images\Thumbs.db.
启动eclipse正常,部署项目的时候发生这个错误. 解决办法: 1. 从tomcat中删除这个项目,并清空work目录下的缓存 2. 在eclipse中执行project>Clean>C ...
- Sencha Touch2 时间轴ListPanel
直接贴代码 timeline.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...
- safeseh+dep保护绕过
[文章作者] :h_one [漏洞程序名称]:mplayer.exe [漏洞类型] :缓冲区溢出 [保护方式] :safeseh+dep [操作平台] ...
- JavaScript之表单验证讲解
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些 ...
- 20+个可重复使用的jQuery代码片段
jQuery已经成为任何web项目的重要组成部分.它为网站提供了交互性的通过移动HTML元素,创建自定义动画,处理事件,选择DOM元素,检索整个document ,让最终用户有一个更好的体验. 在这篇 ...