指令难点在于参数

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的更多相关文章

  1. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  2. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  3. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  4. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  5. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  6. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  7. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  8. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  9. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

随机推荐

  1. [BZOJ4316]小C的独立集(圆方树DP)

    题意:求仙人掌图直径. 算法:建出仙人掌圆方树,对于圆点直接做普通的树上DP(忽略方点儿子),方点做环上DP并将值直接赋给父亲. 建图时有一个很好的性质,就是一个方点在邻接表里的点的顺序正好就是从环的 ...

  2. [BZOJ 1195] 最短母串

    Link:https://www.lydsy.com/JudgeOnline/problem.php?id=1195 Solution: 看到数据范围n<=12,就要往状压DP上想 为了保证后项 ...

  3. AtCoder - 2705 Yes or No

    Problem Statement You are participating in a quiz with N+M questions and Yes/No answers. It's known ...

  4. Codeforces 311E Biologist

    Discription SmallR is a biologist. Her latest research finding is how to change the sex of dogs. In ...

  5. 权限管理-RBAC

    (一)RBAC 通过用户与角色关联,角色与操作的关联实现用户与操作的关联 (二)权限细分 (三)数据库设计 (四)程序设计 (五)权限与应用程序 (1)应用URL实现程序权限控制 (2)应用code实 ...

  6. React Native Navigator组件回调

    在push的时候定义回调函数: this.props.navigator.push({ component: nextVC, title: titleName, passProps: { //回调 g ...

  7. 项目管理利器——Maven阅读目录

    阅读目录 一.Maven介绍及环境搭建 二.构建Maven版的Hello World 三.Maven常见构建命令 四.自动创建目录骨架 五.Maven中的坐标和仓库 六.在eclipse中安装Mave ...

  8. flask的文件上传和下载

    http://flask.pocoo.org/docs/1.0/api/ http://docs.jinkan.org/docs/flask/api.html?highlight=download h ...

  9. zClip使用时ZeroClipboard生成的位置不对的问题

    zclip官网:http://steamdev.com/zclip 我之前在另外一篇博文里面写了一个解决生成的位置不对的问题,请参考:http://www.cnblogs.com/longshiyVi ...

  10. Java笔记4:JDBC纯驱动方式连接Oracle

    JDBC纯驱动方式连接Oracle 1 下载Oracle提供的驱动程序包 下载地址: http://www.oracle.com/technetwork/database/enterprise-edi ...