AngularJS directive入门例子
这是《AngularJS》这本书里面提供的一个例子：
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 = '这里是内部的内容。';
});
HTML代码：
<html ng-app='expanderModule'>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../angular-1.0.3/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="ExpanderSimple.css"/>
</head>
<body>
<div ng-controller='SomeController'>
<expander class='expander' expander-title='title'>
{{text}}
</expander>
</div>
</body>
<script src="ExpanderSimple.js"></script>
</html>
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;
}
运行效果如下：
compile阶段进行标签解析和变换，link阶段进行数据绑定等操作！
在所有module都装载完毕在之后，compile(element)(scope);开始编译和链接整个dom树（其实就是调用dom上出现的指令）。
第一步：传递应用根节点给$compile函数，开始编译，返回link函数。
第二步：传递根作用域给link函数，开始链接（每个指令分为pre link 和 post link两个过程）
link函数的参数：
- scope
这个就是当前control的$scope对象，没啥好说的。 - element
这个是当前dom节点经过“jquery”处理过后的对象。用过jquery的都知道这个概念。当然这边的jquery是angular自己实现的阉割版的jquery。方法少了许多，不过按angular的话说，够用了。 - attrs
这个对象包含，当前的dom节点上的各种属性标签的值。不过要注意的是这边会将xxx-bbb这种形式的改写成xxxBbb的这种驼峰形式。
AngularJS directive入门例子的更多相关文章
- 学习AngularJs:Directive指令用法（完整版）
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
- AngularJS快速入门指南13：表单
一个AngularJS表单是一组输入型控件的集合. HTML控件 HTML输入型标签标包括: input标签 select标签 button标签 textarea标签 HTML表单 HTML表单将各种 ...
- AngularJS快速入门指南12：模块
AngularJS模块定义了一个application. 模块是一个application中不同部分的容器. application中的所有控制器都应该属于一个模块. 带有一个控制器的模块 下面这个a ...
- AngularJS快速入门指南10：DOM节点
AngularJS通过指令将application数据绑定到HTML DOM元素的属性上. ng-disabled指令 ng-disabled指令将AngularJS application数据绑定到 ...
- AngularJS快速入门指南05：控制器
AngularJS控制器用来控制AngularJS applications的数据. AngularJS控制器就是普通的JavaScript对象. AngularJS控制器 AngularJS app ...
- angularjs directive 实例 详解
前面提到了angularjs的factory,service,provider,这个可以理解成php的model,这种model是不带html的,今天所说的directive,也可以理解成php的mo ...
- 【Bootstrap Demo】入门例子创建
本文简单介绍下如何来使用 Bootstrap,通过引入 Bootstrap,来实现一个最基本的入门例子. 在前一篇博文[Bootstrap]1.初识Bootstrap 基础之上,我们完全可以更加方便快 ...
- AngularJS快速入门指南20：快速参考
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南19：示例代码
本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...
随机推荐
- 【CC评网】2013.第38周 要阅读 要有好工具
要阅读,要有好工具 Reeder终于在ipad上推出了第二代版本,终于脱离了Google reader而独立存在: 自从Google reader关闭之后,我就在各种支持rss的阅读器中游荡,却总是找 ...
- 《Linux内核设计的艺术》学习笔记（四）默认段和偏移寄存器
参考书籍:<Intel微处理器> 表1 默认的16位段 + 偏移寻址组合 段 偏移量 特殊用途 CS IP 指令地址 SS SP或BP 堆栈地址 DS BX.DI.SI.8位或16位数 数 ...
- 关于HTML5与移动开发
OSChina API列表: android api:http://tool.oschina.net/apidocs AppCan移动开发平台:http://doc.appcan.cn/#!/guid ...
- MVC--View Razor（1）
(1)输出单一变量: 当前时间:@DateTime.Now (2)输入HTML:@:这是HTML项 (3)C#与HTML混合,输出多行HTML文本时 <text>html文本..</ ...
- 2013年5月~2013年11月份（转接关于ns51服务平台项目）相关资料：
<1> [平台首页] 界面截图:(网络游客所看到的界面首页) <2>[注册] 有需求则注册会员(略...) <3>[个人空间] 注册成功后进入个人空间(有深层次的需 ...
- [转]linux中如何安装软件？
Linux下软件的安装与卸载 在Windows下安装软件时,只需运行软件的安装程序(setup.install等)或者用zip等解压缩软件解开即可安装,运行反安装程序 (uninstall.u ...
- sessionKey
许多人都知道NETSCAPE公司是Internet商业中领先技术的提供者,该公司提供了一种基于RSA和保密密钥的应用于因特网的技术,被称为安全插座层(Secure Sockets Layer,SSL) ...
- 2年后的Delphi XE6
1.有幸下载到Delphi XE6,下载地址如下: http://altd.embarcadero.com/download/radstudio/xe6/delphicbuilder_xe6_win. ...
- 【linux】设置 tomcat 开机启动
方法一: linux 下tomcat开机自启动修改Tomcat/bin/startup.sh 为: export JAVA_HOME=/usr/java/j2sdk1.4.2_08 export CL ...
- shell远程执行命令
ssh主要参数说明 -l 指定登入用户 -p 设置端口号 -f 后台运行,并推荐加上 -n 参数 -n 将标准输入重定向到 /dev/null,防止读取标准输入 -N 不执行远程命令,只做端口转发 - ...