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 ...
随机推荐
- FZU 2214 Knapsack problem（背包问题）
Description 题目描述 Given a set of n items, each with a weight w[i] and a value v[i], determine a way t ...
- STORM_0005_第一个非常简单的storm topology的提交运行
配置好storm之后就可以开始在eclipse里面写topology了. 下面是我在网上搜到的一个简单的例子,我按照自己的理解注释了一下. 第一步,创建mvn工程 这是pom.xml文件 <pr ...
- VirtualBox全屏切换
用VirtualBox的时候,如果设置为全屏,想再切换回来,没有什么菜单,只有通过键盘的快捷键来操作,才可以恢复. 我常常忘掉,所以老是得去找,以后需要记住这几个按键的快捷键. 1.全屏与非全屏切换: ...
- 小C的故事（快速学C语言，，，极速版！）
前几天这篇博客写了太多废话! 删啦~~. 本篇博客只是为chd A协的全嫩小鲜肉入门C语言的预科, 如果你在此处学习C语言, 不幸走火入魔, 小弱概不负责. //请直接随便找个C语言编译器,抄一下下面 ...
- iOS - Threads 多线程
1.Threads 1.1 进程 进程是指在系统中正在运行的一个应用程序.每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内. 比如同时打开 QQ.Xcode,系统就会分别启动两个进程. ...
- HttpClient的CircularRedirectException异常原因及解决办法
HttpClient的CircularRedirectException异常原因及解决办法 这两天在使用我自己爬虫抓取网页的时候总是出现 org.apache.http.client.ClientPr ...
- JavaWeb学习总结（七）—HttpServletRequest
一.Request概述 request是Servlet.service()方法的一个参数,类型为javax.servlet.http.HttpServletRequest.在客户端发出每个请求时,服务 ...
- (四)linux常用命令
1.在vim下要查找特定的字符串可按Esc键,然后按/字符串,如/DFGE 2.在vim下要显示行数:set nu
- WPA/WPA2四次握手
WPA/WPA2四次握手 官方文档:https://en.wikipedia.org/wiki/IEEE_802.11i-2004 The four-way handshake is designed ...
- hdu 4864 Task
题目链接:hdu 4864 其实就是个贪心,只是当初我想的有偏差,贪心的思路不对,应该是这样子的: 因为 xi 的权值更重,所以优先按照 x 来排序,而这样的排序方式决定了在满足任务(即 xi > ...