--@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 ...
随机推荐
- 阶乘相关<同余与模算术>
题意: 题目很简明: 令S[n]=1*1!+2*2!+3*3!+4*4!+....+n*n! 求S[n]%10000007 多组测试数据 每组一个n n的范围:1<=n<=1000000 ...
- Byte数组和Int的互相转换
public static int bytesToInt(byte[] bytes) { int addr = bytes[0] & 0xFF; addr |= ((bytes[1] < ...
- iPad开发中UIPopoverController的使用
什么是UIPopoverController 是iPad开发中常见的一种控制器 跟其他控制器不一样的是,它直接继承自NSObject,并非继承自UIViewController 它只占用部分屏幕空间来 ...
- springmvc配置首页的方式
<mvc:view-controller path="/" view-name="redirect:/user/loginUI" />
- 多机并行计算框架 和CoolHash数据库(可用于多机机器学习)
http://my.oschina.net/fourinone/blog/289122 http://www.oschina.net/p/fourinone
- 深入浅出 - Android系统移植与平台开发（一）
深入浅出 - Android系统移植与平台开发(一) 分类: Android移植2012-09-05 14:16 16173人阅读 评论(12) 收藏 举报 androidgitgooglejdkub ...
- Alcatraz：插件管理
安装: 终端粘贴 "curl -fsSL https://raw.github.com/alcatraz/Alcatraz/master/Scripts/install.sh | sh&qu ...
- (中等) HDU 1043 Eight，经典搜索问题。
Problem Description The 15-puzzle has been around for over 100 years; even if you don't know it by t ...
- mysql面试
第一方面:30种mysql优化sql语句查询的方法 避免全表扫描: 1.where 及 order by 上建立索引.2.避免在 where 子句中使用!=或<>操作符3. select ...
- wex5 实战 苹果左滑删除与长按编辑
用了多年苹果,习惯了苹果的左滑删除与长按编辑,特别是短信什么的,很多安卓界面也采用了类似方式. 我的想法突如其来,用wex5也设计一个这样的功能,可以吗? 那句广告词,没有什么不可能. 呵呵. 一 ...