Angular.js实现折叠按钮的经典指令.
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实现折叠按钮的经典指令.的更多相关文章
- angular.js封装的文件上传指令
今天把最近用到的东西整理一下,直接上代码,需要申请犀牛存储图片,文件 1.html div div img.img-thumbnail.center-block(ng-src="{{ltUp ...
- Angular.js内置的63个指令
- angular.js学习的第一天
第一天对angular.js进行学习,肯定是面对的入门的最简单的实例: 实现下面的这个效果,首先需要在html页面引入angular.js,在下面的div中,ng-app则表示在当前div是一个ang ...
- 推荐 15 个 Angular.js 应用扩展指令(参考应用)
几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 ...
- angular js 指令的数据传递 及作用域数据绑定
<div my-directive my-url="http://google.com" my-link-text="Click me to go to Googl ...
- Angular JS - 6 - Angular JS 常用指令
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Angular JS学习之指令
1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...
- Angular JS 学习笔记(自定义服务：factory，Promise 模式异步请求查询:$http,过滤器用法filter，指令:directive)
刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...
- Angular.js之自定义指令学习笔记
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- PowerShell中的基础数据类型
PowerShell是一个面向对象的语言,在申明变量的时候不强制要求申明数据类型,使用$开头来申明变量即可. 基本数据类型 PowerShell本身是基于.Net开发出来的,所以在.Net中的基本数据 ...
- Oracle分区表
先说句题外话- 欢迎成都天府软件园的小伙伴来面基交流经验~ 一:什么是分区(Partition)? 分区是将一个表或索引物理地分解为多个更小.更可管理的部分. 分区对应用透明,即对访问数据库的应用 ...
- 从零自学Hadoop(01)：认识Hadoop
本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 阅读目录 序 Hadoop 项目起源 优点 核心 ...
- Centos6下安装Hadoop2.6 问题总结
一. 安装背景:VirtualBox下安装三台Centos6.8虚拟机(一主:master, 两从:slave1,slave2) Centos版本:CentOS-6.8-x86_64 网络配置:三台虚 ...
- Redis时延问题分析及应对
Redis时延问题分析及应对 Redis的事件循环在一个线程中处理,作为一个单线程程序,重要的是要保证事件处理的时延短,这样,事件循环中的后续任务才不会阻塞: 当redis的数据量达到一定级别后(比如 ...
- 把Tomcat注册为windows服务
配置环境变量 JAVA_HOME=D:\java CLASSPATH=.;%JAVA_HOME%\lib; PATH=%JAVA_HOME%\bin; 提示:一般jre默认在jdk目录下%JAVA_H ...
- CocoaPods报错：The dependency `AFNetworking ` is not used in any concrete target
最近更新了下cocoapods,今天再pod update 就遇到这个错误: 大体意思就是说,库没有用到指定的target. 找了下资料,发现是新版CocoaPods在 Podfile里使用时,必须 ...
- Tomcat服务无法开启，点击start不一会就变成stopped
前天在学习J2EE方面技术时,运行一个调试示例,需要用到Tomcat服务,结果使用Myeclipse怎么也打不开服务.之后去尝试手动打开Tomcat服务也无法成功,一直弄了好几个小时.后来,问了一下隔 ...
- 简单的词法分析和语法分析（C++实现，CodeBlocks+GCC编译）
说明: 分析的语言是SNL语言,详见<编译程序的设计与实现>( 刘磊.金英.张晶.张荷花.单郸编著) 词法分析就是实现了词法分析的自动机 语法分析使用递归下降法 运行结果: 词法分析 得到 ...
- HDU3555 Bomb[数位DP]
Bomb Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others)Total Submi ...