--@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 ...
随机推荐
- POj-3104 Drying 二分+贪心
题目大意:有n件湿的衣服,每件衣服都有相应的湿度,每分钟每件衣服的湿度减1(除了在烘干机里的衣服),现在有一个烘干机,烘干机一分钟可以让一件衣服的湿度降低k,问至少要花多少分钟才能使每件衣服的湿度为0 ...
- java调用dll-JNA
介绍 给大家介绍一个最新的访问本机代码的 Java 框架 —JNA . JNA(Java Native Access) 框架是一个开源的 Java 框架,是 SUN 公司主导开发的,建立在经典的 JN ...
- 关于css3的calc（）
么是calc()? 学习calc()之前,我们有必要先知道calc()是什么?只有知道了他是个什么东东?在实际运用中更好的使用他. calc()从字面我们可以把他理解为一个函数function.其实c ...
- stm32 Bootloader设计(YModem协议) (转)
源:stm32 Bootloader设计(YModem协议) 相信很多人都希望,不开盖就可以对固件进行升级吧,就像手机那些.下文中的bootload就来实现这样的功能. 前段时间有项目关于Bootlo ...
- js-权威指南学习笔记9
第九章 类和模块 1.在JS中,类的实现是基于其原型继承机制的,如果两个实例都从同一个原型对象上继承了属性,我们说它们是同一个实例. 2.常见的编程约定:定义构造函数既是定义类,并且类名首字母要大写. ...
- 2016年最全面的VR资源盘点，不只有VR视频播放器还有具体到步骤的VR资源
2016年过去了,有多少人开始使用VR来观看我们喜欢的视频资源呢?比传统视频更高的沉浸感,甚至在VR眼镜的视角中,自己仿佛化生成视频中的主角一般.然而,这种体验只有VR眼镜还是不行的,还需要有一个VR ...
- mysql查看sql语句执行时间
原文地址: http://www.cnblogs.com/happySmily/p/5943311.html
- ajax 基础2
连接数据库实现分页功能 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defa ...
- List学习笔记
List 特点:1.有序.2.可重复. ArrayList: 底层是数组,数组是有下标的. 会自动扩容,底层默认初始化容量是10,扩大之后的容量预设是原来容量的一半(jdk 1.8).以前好像是原容量 ...
- [noip2013]货车运输(kruskal + 树上倍增)
描述 A 国有 n 座城市,编号从 1 到 n,城市之间有 m 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 q 辆货车在运输货物,司机们想知道每辆车在不超过车辆限重的情况下,最多能运多 ...