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 ...
随机推荐
- Linux命令工具基础04 磁盘管理
Linux命令工具基础04 磁盘管理 日程磁盘管理中,我们最常用的有查看当前磁盘使用情况,查看当前目录所占大小,以及打包压缩与解压缩: 查看磁盘空间 查看磁盘空间利用大小 df -h -h: huma ...
- Codeforces Round #379 (Div. 2) E. Anton and Tree 树的直径
E. Anton and Tree time limit per test 3 seconds memory limit per test 256 megabytes input standard i ...
- Entity Framework（1）
Web.Config配置 <dataConfiguration defaultDatabase="strConn"> <providerMappings> ...
- 几种HtmlEncode的区别(转)
一.C#中的编码 HttpUtility.HtmlDecode.HttpUtility.HtmlEncode与Server.HtmlDecode.Server.HtmlEncode与HttpServe ...
- ubuntu虚拟环境virtualenv中djanggo连接mysql
在ubuntu服务器上安装MYSQLDB,执行:sudo apt-get install python-mysqldb, 若提示: ---------------------------------- ...
- 线程高级应用-心得4-java5线程并发库介绍，及新技术案例分析
1. java5线程并发库新知识介绍 2．线程并发库案例分析 package com.itcast.family; import java.util.concurrent.ExecutorServi ...
- Google MapReduce/GFS/BigTable三大技术的论文中译版
今天查找分布式计算的有关资料,发现Google的三大核心技术MapReduce.GFS和BigTable的论文都已经被翻译成高质量的中文,更巧的是,这三篇中译版的原发地都是CSDN的Blog.其中最新 ...
- 三种实例化bean的方式
在spring中有三中实例化bean的方式: 一.使用构造器实例化:(90%通常使用的一个方法) 二.使用静态工厂方法实例化: 三.使用实例化工厂方法实例化. 每种实例化所采用的配置是不一样的: 一. ...
- matplotlib库的常用知识
看看matplotlib是什么? matplotlib是python上的一个2D绘图库,它可以在夸平台上边出很多高质量的图像.综旨就是让简单的事变得更简单,让复杂的事变得可能.我们可以用matplot ...
- Poco C++——HTTP的post请求和get请求
两种请求都需要包含头文件: #include <iostream> #include <string> #include "Poco/Net/HTTPClientSe ...