<!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. C#委托详解（1）：什么是委托

    本系列文章将详细探讨C#中的委托,列举其主要的实现方式,并分析其在设计层面和编码层面带来的好处,最后会讨论其安全性和执行效率等. 什么是委托? 委托是寻址方法的.NET版本,使用委托可以将方法作为参数 ...

  2. 【Longest Common Prefix】cpp

    题目: Write a function to find the longest common prefix string amongst an array of strings. 代码: class ...

  3. 基于word制作网站webhelp

    处理问题描述:现在我有个javaweb项目,需要在portal上面点击help即可打开: 当前搜索百度(谷歌不能用了),没有找到更好的解决方案,自己想了个比较简单实用的方法,仅供参考: 设计原理:利用 ...

  4. [转载]char * 和char []的区别---之第二篇

    原文地址:http://blog.sina.com.cn/s/blog_74a4593801019keb.html main() { char *p="abc123ABC";//c ...

  5. bzoj 1497 最小割模型

    我们可以对于消费和盈利的点建立二分图,开始答案为所有的盈利和, 那么源向消费的点连边,流量为消费值,盈利向汇连边,流量为盈利值 中间盈利对应的消费连边,流量为INF,那么我们求这张图的最小割,用 开始 ...

  6. hdu 2853 Assignment KM算法

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2853 Last year a terrible earthquake attacked Sichuan ...

  7. 【POJ】【2891】Strange Way to Express Integers

    中国剩余定理/扩展欧几里得 题目大意:求一般模线性方程组的解(不满足模数两两互质) solution:对于两个方程 \[ \begin{cases} m \equiv r_1 \pmod {a_1} ...

  8. ASP.NET输出PNG图片时出现GDI+一般性错误的解决方法

    偶原来的用ASP.NET生成验证码图片时用的是JPG格式,今天想把它改成PNG格式的,结果就出现GDI+一般性错误,查了N久资料,才发现解决的办法,对分享此解决办法的网友深表感谢 Response.C ...

  9. 实现WMSservice的时候，出现边缘的点或icon被切断的情况

    可以通过为实际查询的boundary加一个buffer,使查询的范围比指定的大一点点,这样就会使tile之间在查询的时候有一定的重叠. 如:Geometry queryBoundary = JTS.t ...

  10. C#中“貌似”跳出while(true)死循环

    当程序第一次执行到Read()函数时,程序会被阻塞,然后输入字符,Enter之后程序被激活,windows平台会自动在输入字符之后加入回车符和换行符,此时输入流中就有三个字符,然而read每次只读取一 ...