angularJS 系列（二）——理解指令 understanding directives
参考：https://github.com/angular/angular.js/wiki/Understanding-Directives
Injecting, Compiling, and Linking functions
When you create a directive, there are essentially up to 3 function layers for you to define[1]:
myApp.directive('uiJq', function InjectingFunction(){
// === InjectingFunction === //
// Logic is executed 0 or 1 times per app (depending on if directive is used).
// Useful for bootstrap and global configuration
return {
compile: function CompilingFunction($templateElement, $templateAttributes) {
// === CompilingFunction === //
// Logic is executed once (1) for every instance of ui-jq in your original UNRENDERED template.
// Scope is UNAVAILABLE as the templates are only being cached.
// You CAN examine the DOM and cache information about what variables
// or expressions will be used, but you cannot yet figure out their values.
// Angular is caching the templates, now is a good time to inject new angular templates
// as children or future siblings to automatically run..
return function LinkingFunction($scope, $linkElement, $linkAttributes) {
// === LinkingFunction === //
// Logic is executed once (1) for every RENDERED instance.
// Once for each row in an ng-repeat when the row is created.
// Note that ng-if or ng-switch may also affect if this is executed.
// Scope IS available because controller logic has finished executing.
// All variables and expression values can finally be determined.
// Angular is rendering cached templates. It's too late to add templates for angular
// to automatically run. If you MUST inject new templates, you must $compile them manually.
};
}
};
})
You can only access data in $scope inside the LinkingFunction. Since the template logic may remove or duplicate elements, you can only rely on the final DOM configuration in theLinkingFunction. You still cannot rely upon children or following-siblings since they have not been linked yet.
例子如下：http://plnkr.co/edit/qrDMJBlnwdNlfBqEEXL2?p=preview
index.html
<!doctype html>
<html ng-app="compilation">
<head>
<meta charset="utf-8">
<title>Compilation Demo</title>
<link rel="stylesheet" href="style.css">
<script src="http://code.angularjs.org/1.1.1/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<div log-compile="parent">
<div log-compile="..child 1">
<div log-compile="....child 1 a"></div>
<div log-compile="....child 1 b"></div>
</div>
<div log-compile="..child 2">
<div log-compile="....child 2 a" ysr-fly="ysrflyhah"></div>
<div log-compile="....child 2 b"></div>
</div>
</div> <!-- LOG -->
<pre>{{log}}</pre>
</body>
</html>
app.js
angular.module('compilation', [])
.directive('logCompile', function($rootScope) {
$rootScope.log = "";
return {
controller: function($scope, $attrs) {
$rootScope.log = $rootScope.log + ($attrs.logCompile + ' (controller)\n');
},
compile: function compile(element, attributes) {
$rootScope.log = $rootScope.log + attributes.ysrFly+ (attributes.logCompile + ' (compile)\n');
return {
pre: function preLink(scope, element, attributes) {
$rootScope.log = $rootScope.log + (attributes.logCompile + ' (pre-link)\n');
},
post: function postLink(scope, element, attributes) {
element.prepend(attributes.logCompile);
$rootScope.log = $rootScope.log + (attributes.logCompile + ' (post-link)\n');
}
};
}
};
})
.directive('terminate', function() {
return {
terminal: true
};
});
style.css
div {
padding: 5px;
margin: 5px;
background-color: #EEE;
border: 1px solid #BBB;
}
div > div {
background-color: #DDD;
}
div > div > div {
background-color: #CCC;
}
ol {
list-style: decimal;
margin-left: 30px;
}
效果如图：
angularJS 系列（二）——理解指令 understanding directives的更多相关文章
- AngularJS 指令（Directives）实践指南
指令(Directives)是所有AngularJS应用最重要的部分.尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令.这篇教程会为你讲述如何自定义指令,以及介绍如何在 ...
- angularJS 系列（七）---指令
----------------------------------------------------------------------------------- 原文:https://www.s ...
- AngularJS 系列 01 - HelloWorld和数据绑定
目录导读: AngularJS 系列 学习笔记 目录篇 前言: 好记性不如烂键盘,随笔就是随手笔记,希望以后有用. 本篇目录: 1. Hello World 2. AngularJS中的数据绑定 3. ...
- 带你走近AngularJS - 创建自己定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自己定义指令 ------------ ...
- struts2官方 中文教程 系列二：Hello World项目
先贴个本帖的地址,免得其它网站被爬去了struts2入门系列二之Hello World 即 http://www.cnblogs.com/linghaoxinpian/p/6898779.html ...
- [知识库分享系列] 二、.NET（ASP.NET）
最近时间又有了新的想法,当我用新的眼光在整理一些很老的知识库时,发现很多东西都已经过时,或者是很基础很零碎的知识点.如果分享出去大家不看倒好,更担心的是会误人子弟,但为了保证此系列的完整,还是选择分享 ...
- WPF入门教程系列(二) 深入剖析WPF Binding的使用方法
WPF入门教程系列(二) 深入剖析WPF Binding的使用方法 同一个对象(特指System.Windows.DependencyObject的子类)的同一种属性(特指DependencyProp ...
- Wireshark入门与进阶系列(二)
摘自http://blog.csdn.net/howeverpf/article/details/40743705 Wireshark入门与进阶系列(二) “君子生非异也,善假于物也”---荀子 本文 ...
- VSTO之旅系列(二)：创建Excel解决方案
原文:VSTO之旅系列(二):创建Excel解决方案 本专题概要 引言 创建VSTO项目 Excel对象模型 创建Excel外接程序 创建Excel文档级自定义项 小结 一.引言 也许很多朋友都没有听 ...
随机推荐
- 如何测试本地是否能够正常访问云服务器的 Web 端口
在windows环境下打开DOS命令行 使用telnet命令.例如 telnet www.baidu.com 80 插播一条小知识:DOS下清屏的命令是cls. 首先很不幸,出现了['telnet' ...
- Jquery 实现原理之 Ajax
一:Jquery Ajax底层接口有:$.ajaxPrefilters.$.ajaxTransport.$.ajaxSettings.$ajaxSetup.$ajaxSettings; 其中$.aja ...
- 【dp 背包变形】 poj 1837
#include <cstdio> #include <memory.h> #include<iostream> using namespace std; ][]; ...
- OpenGL一些函数详解（二）
OpenGL ES顶点数据绘制技巧 在OpenGL中,绘制一个长方体,需要将每个顶点的坐标放在一个数组中.保存坐标时有一些技巧(由于字母下标不好表示,因此将下标表示为单引号,如A1将在后文中表示为A' ...
- iOS 枚举写法
1.第一种 typedef enum { kPRStateNormal = 0, kPRStatePulling = 1, kPRStateLoading = 2, kPRStateHitTheEnd ...
- 项目管理实践教程一、工欲善其事，必先利其器【Basic Tools】
今天,我们首先安装一些必须的软件,主要有下面的4个,其中软件1和2使用在服务器机上,软件3和4安装在客户端机上.另外,我们还有用到MSBuild.RoboCopy.WebDeployment等等,在下 ...
- db2数据导出导入
C:\Users\yexuxia>set db2instance=TCASHMAN C:\Users\yexuxia>db2(c) Copyright IBM Corporation 19 ...
- 学习笔记——Windows下cocos2d-x，eclipse中自编译
cocos2d-x创建的安卓项目导入eclipse后. 在项目属性中配置Builders. 在eclipse编译还需要配置相应的变量,即后面提到的cygwin编译中要添加的变量. D:/cygdriv ...
- 图片处理中的Dithering技术
话说二战的时候,美国轰炸机每次执行任务,除了满载着威力强大的炸弹以外,还常常要装配一台计算机,飞机飞行方向和投弹的抛物线的计算都离不开这台机器.可是世界上第一台电子计算机在二战结束后才发明,轰炸机上当 ...
- SVM支持向量机算法
支持向量机(SVM)是另一类的学习系统,其众多的优点使得他成为最流行的算法之一.其不仅有扎实的理论基础,而且在许多应用领域比大多数其他算法更准确. 1.线性支持向量机:可分情况 根据公式(1)< ...