var expanderModule=angular.module('expanderModule',[])

expanderModule.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 toggle(){

                  scope.showMe=!scope.showMe;

               }

            }

      }

});

expanderModule.controller('SomeController',function($scope){

      $scope.title='点击展开';

      $scope.text='这里是内部的内容';

});
<!DOCTYPE html>

<html lang="en" ng-app='expanderModule'>

<head>

  <meta charset="UTF-8">

  <title>Angular.js</title>

</head>

<style type="text/css">

        .expander {

            border: 1px solid black;

            width: 250px;

        }

        .expander>.title {

            background-color: black;

            color: white;

            padding: .1em .3em;

            cursor: pointer;

        }

        .expander>.body {

            padding: .1em .3em;

        }

</style>

<body>

      <div ng-controller='SomeController'>

              <expander class='expander' expander-title='title' ng-cloak>

                      {{text}}

              </expander>         

      </div>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="Angular.js"></script>

<script src="angular-route.js"></script>

<script type="text/javascript" src="test.js"></script>

</body>

</html>

Angular.js实现折叠按钮的经典指令.的更多相关文章

  1. angular.js封装的文件上传指令

    今天把最近用到的东西整理一下,直接上代码,需要申请犀牛存储图片,文件 1.html div div img.img-thumbnail.center-block(ng-src="{{ltUp ...

  2. Angular.js内置的63个指令

  3. angular.js学习的第一天

    第一天对angular.js进行学习,肯定是面对的入门的最简单的实例: 实现下面的这个效果,首先需要在html页面引入angular.js,在下面的div中,ng-app则表示在当前div是一个ang ...

  4. 推荐 15 个 Angular.js 应用扩展指令(参考应用)

    几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 ...

  5. angular js 指令的数据传递 及作用域数据绑定

    <div my-directive my-url="http://google.com" my-link-text="Click me to go to Googl ...

  6. Angular JS - 6 - Angular JS 常用指令

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. Angular JS学习之指令

    1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...

  8. Angular JS 学习笔记(自定义服务：factory，Promise 模式异步请求查询:$http,过滤器用法filter，指令:directive)

    刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...

  9. Angular.js之自定义指令学习笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. 【转】Java并发编程注意事项

    保证线程安全的三种方法: 不要跨线程访问共享变量 使共享变量是final类型的 将共享变量的操作加上同步 一开始就将类设计成线程安全的, 比在后期重新修复它,更容易. 编写多线程程序, 首先保证它是正 ...

  2. WIN 下的超动态菜单（三）代码

    WIN 下的超动态菜单(一)简介 WIN 下的超动态菜单(二)用法 WIN 下的超动态菜单(三)代码 作者:黄山松,发表于博客园:http://www.cnblogs.com/tomview/ 超动态 ...

  3. Linux简介及常用命令使用4--linux高级命令与技巧

    top 几个磁盘fdisk -l 磁盘空间 df -lhdf -al 查看进程:ps -ef"grep java杀死进程:kill -9 进程号 more中过滤 more xxx |grep ...

  4. Win Server 2008 RD案例：Client通过Server的浏览器上网

    一.简介 RD是Windows Server远程桌面服务,可以实现从客户端运行服务器上的软件.首先在Server安装软件,设置能远程访问的应用和账号,并且创建.rdp快捷方式文件,然后Client打开 ...

  5. Java程序性能优化——让你的java程序更快、更稳定

    1.Java性能调优概述 1.1.Web服务器,响应时间.吞吐量是两个重要的性能参数. 1.2.程序性能的几个表现: 执行速度:程序的反映是否迅速,响应时间是否足够短 内存分配:分配是否合理,是否过多 ...

  6. Vijos P1196吃糖果游戏[组合游戏]

    描述 Matrix67和Shadow正在做一个小游戏. 桌子上放着两堆糖果,Matrix67和Shadow轮流对这些糖果进行操作.在每一次操作中,操作者需要吃掉其中一堆糖果,并且把另一堆糖果分成两堆( ...

  7. idea快捷键(自用)

    idea快捷键(自用) 1.比如输入eclipse下面的main,sysout等,在idea里面同样可以实现,如下: sysout(sout 按tab),main(psvm按tab),具体可按照ctr ...

  8. 初识Quartz(入门案例)+常用的Cron表达式

    1.Quartz架构图 1.实体层 package cn.happy.entity; //1. public class Plan { //时间 private String date; //任务 p ...

  9. Oracle日期格式转换，tochar()，todate()

    Oracle日期格式转换 本文主要介绍Oracle中的日期转换. 1. 日期转化为字符串 (以2016年10月20日为例) select to_char(sysdate,'yyyy-mm-dd hh2 ...

  10. ireport制作小技巧<Reproduce>

    首先ireport中大小写问题: 1.parameter中如果小写,引用也小写 2.$F{},一般都大写 3.子报表中引用父报表中查询出来的值时,只需要小写即可,即在子报表的parameter中只需要 ...