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. WebAPi的可视化输出模式(RabbitMQ、消息补偿相关）——所有webapi似乎都缺失的一个功能

    最近的工作我在做一个有关于消息发送和接受封装工作.大概流程是这样的,消息中间件是采用rabbitmq,为了保证消息的绝对无丢失,我们需要在发送和接受前对消息进行DB落地.在发送前我会先进行DB的插入, ...

  2. PHP+Apache+Zend Studio+MySql+Navicat+phpAdmin

    本文章介绍整个PHP开发环境的搭建 数据库:MySql  5.5.50 数据库软件:Navicat 11.1.20和phpAdmin 4.6.5.1任选 php库:PHP 7.0.13 服务器:Apa ...

  3. ELF Format 笔记（十五）—— 符号哈希表

    ilocker:关注 Android 安全(新手) QQ: 2597294287 符号哈希表用于支援符号表的访问,能够提高符号搜索速度. 下表用于解释该哈希表的组织,但该格式并不属于 ELF 规范. ...

  4. 关于nfs共享目录的使用技巧

    nfs客户端的使用 1.查看nfs服务器信息挂载信息 1)在客户端,要查看nfs服务器上有哪些共享目录 # showmount -e nfs服务器ip 在客户端,要查看nfs服务器上有哪些客户端的目录 ...

  5. MongoDB学习笔记（一：常见问题汇总）

    一.安装时出现The default storage engine 'wiredTiger' is not available问题解决 今晚在自己老式笔记本来试了一下MongoDB的安装,由于配置比较 ...

  6. Ural 1010. Discrete Function

    1010. Discrete Function Time limit: 1.0 secondMemory limit: 64 MB There is a discrete function. It i ...

  7. BZOJ 2243: [SDOI2011]染色 [树链剖分]

    2243: [SDOI2011]染色 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 6651  Solved: 2432[Submit][Status ...

  8. NOIP2003pj栈[卡特兰数]

    题目背景 栈是计算机中经典的数据结构,简单的说,栈就是限制在一端进行插入删除操作的线性表. 栈有两种最重要的操作,即pop(从栈顶弹出一个元素)和push(将一个元素进栈). 栈的重要性不言自明,任何 ...

  9. NYOJ 187

    快速查找素数 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 现在给你一个正整数N,要你快速的找出在2.....N这些数里面所有的素数. 输入 给出一个正整数数N(N&l ...

  10. python Requests模块的简要介绍

    Requests的安装: pip install Requests Requests的使用: import requests url = "http://www.mzitu.com" ...