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 ...
随机推荐
- xml基础学习笔记02
接着上次的xml笔记01 ,记录一下如何DOM创建xml 一.由于没有特意来写博客,都是在程序中用注释的方法记录笔记,整理过来难免格式错误,排版什么的,大家好事看不懂就仔细看给出的代码加上注释,一定会 ...
- Tomcat配置HTTPS方式生成安全证书
在Tomcat 6中配置SSL双向认证是相当容易的,本文将介绍如何使用JDK的keytool来为Tomcat配置双向SSL认证.并实现批量生成证书 系统需求:JDK 5.0Tomcat 6.0.16启 ...
- Google Guava学习笔记——基础工具类针对Object类的使用
Guava 提供了一系列针对Object操作的方法. 1. toString方法 为了方便调试重写toString()方法是很有必要的,但写起来比较无聊,不管如何,Objects类提供了toStrin ...
- Using sql azure for Elmah
The MSDN docs contain the list of T-SQL that is either partially supported or not supported. For ex ...
- 利用doScroll在IE浏览器里模仿DOMContentLoaded
稍微了解一点框架的事件绑定的都知道 window.onload 事件需要在页面所有内容(包括图片.flash.iframe等)加载完后,才执行,但往往我们更希望在 DOM 一加载完就执行脚本,而各大框 ...
- Java/Java Web中乱码解决汇总
在开发Java/Java Web Application过程中,往往会出现乱码问题,而且有的时候真会弄得人很烦,浪费太多的时间. 记得之前看过一篇帖子,详细解释了Encoding/Decoding过程 ...
- php中==与===区别
==是不判断二者是否是同一数据类型,而===是更为严格的比较,它不但要求二者值相等,而且还要求它们的数据类型也相同
- [百度空间] [原] Empty base class optimization
最近遇到了一个诡异的问题, 数组的数据不对, 最后发现是两个类型的大小不一样导致的. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
- WPF 验证
WPF中TextBox的自动验证: 演示 : 用以下两个TextBox分别显示验证IP和非空值验证,先看效果: IP自动验证效果: 非空值自动验证效果: 第一步:定义TextBox验证的样式: < ...
- SOA之（1）——SOA架构基础概念
在深入探讨什么是面向服务的架构(SOA)之前,先建立一些基本的概念和术语的基本描述而非严格定义,所以也许有些定义在业内还存留争议,此处暂且忽略. 架构基础 技术架构(Technology Archit ...