<!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. using详解（C#）

    using肯定所有人都用过,最简单的就是使用using引入命名空间,然后就是引入别名,简化输入,本文主要介绍第三种用法,即用using强制对象清理资源. 先看下面这段代码: try { using ( ...

  2. Eclipse Kepler中配置JadClipse

    Jad是一个Java的一个反编译工具,是用命令行执行,和通常JDK自带的java,javac命令是一样的.不过因为是控制台运行,所以用起来不太方便.不过幸好有一个eclipse的插件JadClipse ...

  3. Dotfuscator可以实现混淆代码、变量名修改、字符串加密

    C#编写的代码如果不进行一定程度的混淆和加密,那么是非常容易被反编译进行破解的,特别是对于一些商业用途的C#软件来说,因为盯着的人多,更是极易被攻破.使用VS自带的Dotfuscator可以实现混淆代 ...

  4. Vim 常用命令 一

    今天第一次学习了 Vim编辑器的一些使用  拿出来和大家分享下. 1.首先 列出 常用快捷键 u 表示 撤销上一步 x 表示 删除光标位内容 dd 表示 删除光标所在行内容 >G   表示 光标 ...

  5. SPOJ 057 Supernumbers in a permutation

    原题链接:http://www.spoj.com/problems/SUPPER/ 这道题n<=200000,那么确定为nlogn的算法,再定位到求LIS的O(nlogn)的算法. 对于每个a[ ...

  6. 【BZOJ】【1061】【NOI2008】志愿者招募

    网络流/费用流 OrzOrzOrz,这题太神了不会捉. 题解:https://www.byvoid.com/blog/noi-2008-employee/ 这道题正确的解法是构造网络,求网络最小费用最 ...

  7. NYOJ-205 求余数 AC 分类： NYOJ 2014-02-02 12:30 201人阅读 评论(0) 收藏

    这题目看一眼以为难度评级出错了,只是一个求余数的题目,,后来才发现,位数小于百万位,,,我还以为是大小小于百万呢,所以借鉴了另一大神的代码, 用大数,重点是同余定理: (a+b)mod m=((a m ...

  8. string为什么可以写入共享内存

    我今天在想这个vector,map为什么不能写入共享内存,原来是因为new的时候只是new了这个对象在共享内存上,而真正的堆上的内存并没有在共享内存里面的,如果要想vector 可以共享就要重写分配器 ...

  9. javascript去除首尾空白字符

    if ( twocode.replace(/^\s+|\s+$/g,"")=="" ) { alert("二维码不能为空"); docume ...

  10. JavaScript之match()方法讲解

    定义和用法 match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配. 该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置. ...