Angularjs学习笔记8_directive2
指令难点在于参数
angular.module('app', [])
.directive('myDirective', function() {
return {
restrict: String,
priority: Number,
terminal: Boolean,
template: String or Template Function:
function(tElement, tAttrs) {...},
templateUrl: String,
replace: Boolean or String,
scope: Boolean or Object,
transclude: Boolean,
controller: String or function(scope, element, attrs, transclude, otherInjectables) { ... },
controllerAs: String,
require: String,
link: function(scope, iElement, iAttrs) { ... },
compile: // 返回一个对象或连接函数，如下所示：
function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) { ... },
post: function(scope, iElement, iAttrs, controller) { ... }
}
return function postLink(...) { ... }
}
};
});
1. 分成三类：
1. 描述指令或DOM本身特性的内部参数
2. 连接指令外界、与其他指令或控制器沟通的对外参数
3. 描述指令本身行为的行为参数
2. 内部参数
· restrict：String，E（元素）<my-directive></my-directive>
A（属性，默认值）<div my-directive="expression"></div>
C（类名）<div class="my-directive:expression;"></div>
M（注释）<--directive:my-directive expression-->
· priority: Number，指令执行优先级
· template: String，指令链接DOM模板，例如“<h1>{{head}}</h1>”
· templateUrl:String，DOM模板路径
· replace: Boolean，指令链接模板是否替换原有元素，
3. 对外参数——scope
scope参数的作用是，隔离指令与所在控制器间的作用域、隔离指令与指令间的作用域。
scope参数是可选的，默认值为false，可选true、对象{}；
· false：共享父域
· true：继承父域，且新建独立作用域
· 对象{}：不继承父域，且新建独立作用域
false、true、{}三者对比
4. 对外参数——require
scope是指令与外界作用域通讯的桥梁，而require是指令与指令之间通讯的桥梁。这个参数最大的作用在于，当要开发单指令无法完成，需要一些组合型指令的控件或功能，例如日期控件，通过require参数，指令可以获得外部其他指令的控制器，从而达到交换数据、事件分发的目的。
使用方法：require: String or Array——String值为引入指令名称，并且有两个寻找指令策略符号‘？’与‘^’；Array数组则为多个外部指令名称。
在link函数第4个参数ctrl中获取注入外部指令的控制器，如果require为String，ctrl为对象，如果require是数组，ctrl为数组。
require: '^teacher1',
link: function ($scope, $element, $attrs, ctrl) {
//ctrl指向teacher1指令的控制器
}
？策略——寻找指令名称，如果没有找到，link函数第4个参数为null；如果没有？，则报错。
^ 策略——在自身指令寻找指令名称的同时，向上父元素寻找；如果没有^，则仅在自身寻找。
指令studentA向上可以找到指令teacher及自身，但是不能找到相邻兄弟的student-b。
5. 行为参数——link与controller
link与controller都是描述指令行为的参数，但它们是要描述的行为是完全不同的类型。
controller语法 controller：String or Function
controller本身的意义就是赋予指令控制器，而控制器就是定义其内部作用域的行为的。所以controller要描述的是：指令的作用域的行为。
//指向匿名控制器
controller: function ($scope) {
},
//指向控制器mainCtrl
controller: "mainCtrl"
link语法 link：String Or Function
link名称是链接函数，所以在解释链接函数之前，先要说一下Angular的初始化对于指令究竟做了什么。
Angular在刚从HTTP Response接收静态素材之初，会首先去分析母页HTML中有哪些原生指令或自定义指令，然后再去加载指令的template模板HTML，而template模板中又去加载自己的指令模板，如此类推，直到Angular找到了所有的指令及模板，形成模板树，并返回模板函数，提供给下一阶段进行数据绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/angular.min.js"></script>
</head>
<body ng-app="app">
<stu1></stu1>
<script >
var app = angular.module("app" , []);
app.directive( 'stu1' , function () {
return {
restrict: 'E' ,
template: "<p>1</p><stu2></stu2>" ,
link: function (scope) {
console.log( 'stu1 running' );
}
};
});
app.directive( 'stu2' , function () {
return {
restrict: 'E' ,
template: "<p>2</p><stu3></stu3>" ,
link: function (scope) {
console.log( 'stu2 running' );
}
};
});
app.directive( 'stu3' , function () {
return {
restrict: 'E' ,
template: "<p>3</p>" ,
link: function (scope) {
console.log( 'stu3 running' );
}
};
});
</script >
</ body>
1 2 3 三个模板都渲染完成了。然后从最根部的stu3的link函数开始，依次执行stu 3 stu2 stu1的link函数。
简单来说就是：
1. 加载模板，形成DOM模板树
2. @@@@
3. 数据绑定
@@@@ 就是link链接函数，它会在形成模板树之后，在数据绑定之前，从最底部指令开始，逐个指令执行它们的link函数。
执行顺序是？答案是先controller，后link。
放到全局顺序就是：
1. 执行controller，设置各个作用域scope
2. 加载模板，形成DOM模板树
3. 执行link，设置DOM各个行为
4. 数据绑定，最后scope绑上DOM
Angularjs学习笔记8_directive2的更多相关文章
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--Guide教程系列文章索引
在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
随机推荐
- 树莓派编译nginx，支持rtmp直播
树莓派3B+ 系统更新至最新 下载依赖 sudo apt-get update sudo apt-get install libxslt1-dev libgd-dev libgeoip-dev lib ...
- English distilled
[ Any question about the job]关于辞职原因 1. What are the main objectives and responsibilities of the posi ...
- 【贪心】【线性基】bzoj2460 [BeiJing2011]元素 / bzoj3105 [cqoi2013]新Nim游戏
p2460: #include<cstdio> #include<algorithm> using namespace std; #define N 1001 typedef ...
- 【枚举】【权值分块】bzoj1112 [POI2008]砖块Klo
枚举长度为m的所有段,尝试用中位数更新答案. 所以需要数据结构,支持查询k大,以及大于/小于 k大值 的数的和. 平衡树.权值线段树.权值分块什么的随便呢. #include<cstdio> ...
- 【离散化】【扫描线】CH Round #59 - OrzCC杯NOIP模拟赛day1 队爷的新书
//上图绿色扫描线右侧少画了一条扫描线. 很多区间把数轴分成了很多段,看哪个点的(区间覆盖数*该点权值)最大. 显然在某个区间的右端点的答案是最优的. 排序后 用扫描线从左到右扫描,维护每个点的覆盖数 ...
- 8.3（java学习笔记）动态编译（DynamicCompiler）与动态运行(DynamicRun)
一.动态编译 简单的说就是在运行一个java程序的过程中,可以通过一些API来编译其他的Java文件. 下面主要说动态编译的实现: 1.获取java编译编译器 2.运行编译器(须指定编译文件) 获取编 ...
- Exercise02_01
import java.util.Scanner; public class Out { public static void main(String[] args){ Scanner input = ...
- 输入格式MultipleInput
MultipleInput输入格式允许一个job的输入为多个文件夹下的文件(也就是多路径输入),并且不同文件夹下的文件可以实现不同的map逻辑,不过貌似必须使用相同的reduce逻辑. http:// ...
- Android 架构 3.实现
以实现最小化可用产品(MVP)的目标,用最简单的方式来搭建架构和实现代码.IDE采用Android Studio,Demo实现的功能为用户注册.登录和展示一个券列表,数据采用我们现有项目的测试数据,接 ...
- "__doPostBack”未定义的解决办法（转载）
"__doPostBack”未定义,在IE下调试错误: 问题是服务器版的.Net40的补丁没有打上,ASP.NET 可能无法辨识出一些浏览器的最新版本,还会经常把它们看做是低级的浏览器,不支 ...