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. gcc编译过程简述

    在linux系统上,从源文件到目标文件的转化是由编译器完成的.以hello.c程序的编译为例,如下: dfcao@linux: gcc -o hello hello.c 在这里,gcc编译器读取源文件 ...

  2. 如何读懂复杂的C语言声明

    本文已迁移至: http://www.danfengcao.info/c/c++/2014/02/25/howto-understand-complicated-declaration-of-c.ht ...

  3. Java通过几种经典的算法来实现数组排序

    Java实现数组排序 package com.souvc.hibernate.exp; public class MySort { /** * 方法名:main</br> * 详述:Jav ...

  4. Ubuntu搭建Note.Js 平台

    1. 安装nodeJs和npm apt-get install nodejsapt-get install npm 2 .node有一个模块叫n,是专门用来管理node.js的版本的.首先安装n模块: ...

  5. Citrix Xen Desktop安装配置

    Citrix虚拟化的东西其实和我现在做的东西完全没有关系的.反正接到通知要搭一个Citrix Xen Desktop那就做. 先放几个教程: :跟着图片通过XenDesktop7发布Win8桌面 这个 ...

  6. POJ1336 The K-League[最大流 公平分配问题]

    The K-League Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 715   Accepted: 251 Descri ...

  7. C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - 远程同步服务器大量基础数据到客户端

    服务器上保存有上万条的基础数据,需要同步到全国各地的成千上万个客户端,而且这些基础数据也经常在有变化调整.这时候需要有一个稳定的数据同步程序,能分批同步基础数据,由于网络流量,网络的稳定性等因素,需要 ...

  8. Github 使用

    创建repository 可以在Github上无限制使用public repository进行源代码管理,创建一个repository很简单,不多说了. 获取代码到本地 首先要安装Git,然后使用命令 ...

  9. STM32端口复用和映射

    STM32的功能引脚重映射和复用功能STM32中有很多内置外设的输入输出引脚都具有重映射(remap)的功能,本文对一些在使用引脚重映射时所遇到的有关问题加以说明.我们知道每个内置外设都有若干个输入输 ...

  10. E - Super Jumping! Jumping! Jumping!

    /* Nowadays, a kind of chess game called "Super Jumping! Jumping! Jumping!" is very popula ...