--@angularJS--指令之单个点击展开demo
1、expander.html：
<!DOCTYPE HTML>
<html ng-app="app">
<head>
<title>单击展开demo</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/angular.js"></script>
<style>
.expander{width: 250px;border: 1px solid black;}
.expander>.title{background: black;color: white;padding: .1em .3em;cursor: pointer;}
.expander>.body{padding: .1em .3em;}
</style>
</head>
<body>
<div ng-controller="someCtrl">
<expander class='expander' expander-title='title'>
{{text}}
</expander>
</div>
<script src="./expander.js"></script>
</body>
</html>
2、expander.js：
var myModule = angular.module("app",[]);
myModule.directive('expander',function(){
return {
restrict:'AE',
replace:true,
transclude:true,
scope:{
title:'=expanderTitle'//这里绑定的是expander-title属性，而且经测试非要转成这样的小驼峰写法才可
//=传递的是指令标签内属性expander-title值'title'的值'点击展开'($scope.title = '点击展开';)
},
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值反转1次
scope.showme = !scope.showme;
}
}
}
});
myModule.controller('someCtrl', ['$scope', function($scope){
$scope.title = '点击展开';//这里的title是expander-title='title'中的'title'值部分的赋值；而上面指令定义中的scope{title:是template:模板中的{{title}}，也就是说在指令中，title:'=expanderTitle'这句话的意思是将属性expander-title的值'title'(由控制器赋值)绑定独立作用域也就是指令内的作用域——模板中的{{title}}之上，让{{title}}和'title'同值。记住：独立作用域三大绑定策略的作用就是绑定同一个标签内的属性名传值.不同的是：@符传递是属性值字串；=号传递的是属性值的值(控制器赋予)；&符传递是的属性调用的方法()
$scope.text = '这里是展开后的内容';
}]);
--@angularJS--指令之单个点击展开demo的更多相关文章
- 原生态js单个点击展开收缩
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- angularjs指令弹框点击空白处隐藏及常规方法
效果图展示: 第一种方法:angularjs自定义指令: 指令: app.directive('onBlankHide', function () { return { restrict: 'A', ...
- angularjs指令(二)
最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 angula ...
- AngularJS 指令实践指南（二）
这个系列教程的第一部分给出了AngularJS指令的基本概述,在文章的最后我们介绍了如何隔离一个指令的scope.第二部分将承接上一篇继续介绍.首先,我们会看到在使用隔离scope的情况下,如何从指令 ...
- 【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- 不用搭环境的10分钟AngularJS指令简易入门01（含例子）
不用搭环境的10分钟AngularJS指令简易入门01(含例子) `#不用搭环境系列AngularJS教程01,前端新手也可以轻松入坑~阅读本文大概需要10分钟~` AngularJS的指令是一大特色 ...
- angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- AngularJS 指令生命周期 complie link
AnguarJS指令从解析到生效一共会经历Inject.Compile.Controller加载.Pre-link.Post-link这几个主要阶段. 一.AngularJS指令执行过程 1.加载An ...
- AngularJS指令封装高德地图组件
1 概述 公司移动门户原来是基于AngularJS指令封装的百度地图组件,用于签到.签退.定位等功能,在使用过程中发现百度地图频繁的弹出广告,所以打算重新引用其它地图组件,最后决定基于AngularJ ...
随机推荐
- HDU 1213 How Many Tables 并查集 寻找不同集合的个数
题目大意:有n个人 m行数据,每行数据给出两个数A B,代表A-B认识,如果A-B B-C认识则A-C认识,认识的人可以做一个桌子,问最少需要多少个桌子. 题目思路:利用并查集对相互认识的人进行集合的 ...
- oracle数据库查询常用语句
1.查询SCOTT表中有多少表,并显示表的一些描述select * from all_tables WHERE owner='SCOTT' ; 2.查询oracle数据库版本select * from ...
- arm参数传递和返回值
参数按先后顺序传到 r0 ~ r3 如果不够4个,先传r0,以此类推 如果多于4个,入栈 返回值放在 r0中
- ubuntu14.04英文环境下安装中文输入法
ubuntu14.04英文环境下安装中文输入法 发表于1年前(2014-07-12 20:12) 阅读(4478) | 评论(0) 3人收藏此文章, 我要收藏 赞1 9月19日成都 OSC 源创会 ...
- Apache不能启动解决办法
这是我这两天频繁遇到的问题.Apache服务器还真是问题少年!任何点改动都可能导致它无法使用. 原因一:80端口占用例如IIS,另外就是迅雷.我的apache服务器就是被迅雷害得无法启用! 原因二:软 ...
- 小P的强力值
小P的强力值 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi在虚拟世界中有一只小宠物小P.小P有K种属性,每种属性的初始值为Ai.小Ho送给了小Hi若干颗药丸,每 ...
- vmware中的bridge、nat、host-only的区别
概述: VMWare提供了三种工作模式,它们是bridged(桥接模式).NAT(网络地址转换模式)和host-only(主机模式).要想在网络管理和维护中合理应用它们,你就应该先了解一下这三种工作模 ...
- python第三方扩展库及不同类型的测试需安装相对应的第三方库总结
如何安装第三方库 1.通过python的第三方仓库pypi中查找想要的第三方库 pypi地址:https://pypi.python.org/pypi pip是一个安装和管理Python包的工具,通过 ...
- Spring自学教程-IOC、DI、AOP(二)
一.spring的IOC-就是怎样使用spring来创建对象 二.springDI(依赖注入)-就是怎样给属性赋值 通过set方式赋值 以下我们只需要记住两点的赋值,基本类型和引用类型的赋值 基本类型 ...
- UITableView回调和table相关成员方法详解
http://blog.csdn.net/kingsley_cxz/article/details/9123959 1.UITableView的datasource实现: //回调获取每个sectio ...