angular核心原理解析3：指令的执行过程

指令的执行过程分析。

我们知道指令的执行分两个阶段，一个是compile，一个是link。

我们可以在指令中自定义compile和link。

首先，我们来讲解如何自定义link函数

举个例子：

<!doctype html>
<html ng-app="myModule"><head></head><body><hello></hello></body><script src="angular.js"></script><script src="helloAngular.js"></script>
</html>

helloAngular.js代码

var myModule = angular.module("myModule", []);
myModule.directive("hello", function(){return {restrict: "E",　　　　 template: "<div>Hello,Angular</div>",　　　　 replace: true,        link: function(scope, el, attrs, controller){　　　　　　  el.on("click", function(){　　　　　　　　　　alert("鼠标点击");　　　　　　　});　　　　 }}
});

link方法一般用来对元素进行处理。这里是对元素进行事件的绑定。当用户元素div进行点击时，会弹出鼠标点击的框。

然后，我们来讲解如何自定义compile函数

<!doctype html>
<html ng-app="myModule"><head></head><body><div hellos="3">　　　　　　<p>hello,Angular!</p>　　　　</div></body><script src="angular.js"></script><script src="helloAngular.js"></script>
</html>

helloAngular.js代码

var myModule = angular.module("myModule", []);
myModule.directive("hellos", function(){return {restrict: "A",compile: function(el, attrs, transclude){alert("指令编译");　　　　　　　　var tpl = el.children().clone();    //p标签以及内容　　　　　　　　for(var i =0;i<attrs.hellos -1;i++){　　　　　　　　　　el.append(tpl.clone());　　　　　　　　}　　　　　　　　return function(scope, el, attrs, controller){   //compile必须要return这样的一个函数，这个函数其实就是link函数，在链接阶段，就会执行此link函数。　　　　　　　　　　alert("指令链接");　　　　　　　　}}}
});

当页面加载进来后，就会弹出指令编译，然后再弹出指令链接的框。

如果，我们在上面的helloAngular.js中，不仅自定义了compile方法，而且也自定义了link方法。比如：

var myModule = angular.module("myModule", []);
myModule.directive("hellos", function(){    //定义一个hellos指令return {restrict: "A",compile: function(el, attrs, transclude){alert("指令编译");var tpl = el.children().clone();    //p标签以及内容for(var i =0;i<attrs.hellos -1;i++){el.append(tpl.clone());}return function(scope, el, attrs, controller){  //compile必须要return这样的一个函数，这个函数其实就是link函数，在链接阶段，就会执行此link函数。alert("指令链接");}}　　　　 link : function(scope, el, attrs, controller){　　　　　　　　alert("自定义的link");　　　　 }}
});

当页面加载进来时，自定义的link不会弹出来。意思就是说，当存在compile时，不会执行你自定义的link函数，因为angular会把compile返回的函数当做link函数来执行。当不存在compile时，就会执行你自定义的link函数。

compile函数很少被用到，写起来比较麻烦。

compile函数的作用是对指令的模板进行转换，比如，上面的例子中，compile函数就把指令的模板进行了叠加，改变了页面上的DOM结构。

link函数的作用是在模型和视图之间建立关联，同时在元素上绑定事件监听。

scope在链接阶段才会被绑定到元素上，因此在compile中操作scope会报错。

对于同一个指令的多个实例，compile只会执行一次，而link对于指令的每个实例都会执行一次。比如：ng-repeat指令，如果元素的ng-repeat=3，那么ng-repeat指令的compile只会执行一次，而link会执行三次。

对于指令，我们一般只需要自定义link函数就行了。

接下来，我们来讲解使用compile服务，在页面上查找指令并编译指令的过程：

从ng-app开始，递归子层的DOM结构，收集指令，然后在ng-app指令的位置创建$rootScope作用域。比如：上面的代码中，我们注册了一个hellos指令，angular在启动时，就会遍历DOM去查找这个指令。

如果有需要，会为指令生成childScope。

调用每个指令自己的compile函数，生成自己的compositeLinkFn函数。

编译的结果是返回一个publicLinkFn函数。

编译完成之后立即调用生成的publicLinkFn函数。

angular对tree型的数据结构进行双向绑定时，不太理想，性能消耗太大。

加油！

转载于:https://www.cnblogs.com/chaojidan/p/4282512.html

angular核心原理解析3：指令的执行过程相关推荐

大学计算机一条指令的执行过程实验,实验四一条指令的执行过程
<实验四一条指令的执行过程>由会员分享,可在线阅读,更多相关<实验四一条指令的执行过程(2页珍藏版)>请在人人文库网上搜索. 1.实验四一条指令的执行过程学号:11201 ...
push指令的执行过程
push指令的执行过程转载于:https://www.cnblogs.com/LoveFishC/archive/2012/07/25/3845609.html
大学计算机一条指令的执行过程实验,实验4 一条指令的执行过程实验报告（4页）-原创力文档...
实验4??一条指令的执行过程??实验报告学号????????????姓名??????????? ???????班级:??? ?????????实验时间:? ????年??月??日? ? 实验报告表4 ...
MyBatis核心源码剖析(SqlSession XML解析 Mapper executor SQL执行过程自定义类型处理器缓存日志)
MyBatis核心源码剖析 MyBatis核心源码剖析 1 MyBatis源码概述 1.1 为什么要看MyBatis框架的源码 1.2 如何深入学习MyBatis源码 1.3 源码分析的5大原则 2 ...
【Spring】1.核心原理解析
目录概况 Bean的生命周期推断构造方法 AOP流程事务概况核心知识点串讲,对Spring有整体的了解比如: 1. Bean的生命周期原理 2. 依赖注入原理 3. 初始化原理 4. ...
spring源码分析01-（前期准备）spring核心原理解析和手写简易spring
1.本文主要介绍内容本文会把Spring中核心知识点大概解释下.可以对Spring的底层有一个整体的大致了解.主要内容包括: 手写简易spring框架,帮助更好理解spring. 代码点击链接自取 ...
Nginx的核心原理解析
Nginx 反向代理VS正向代理: 反向代理服务器对于客户端而言它就像是原始服务器,并且客户端不需要进行任何特别的设置.客户端向反向代理的命名空间(name-space)中的内容发送普通请求,接着反向 ...
Spring框架(一) 底层核心原理解析
感兴趣的话大家可以关注一下公众号 : 猿人刘先生 , 欢迎大家一起学习 , 一起进步 , 一起来交流吧! 说明本系列文章以spring-framework-5.3.10为例 , 本篇文章的目的就是使 ...
【Spring】Spring底层核心原理解析
本文内容索引: 1.Bean的生命周期底层原理 2.依赖注入底层原理 3.初始化底层原理 4.推断构造方法底层原理 5.AOP底层原理 6.Spring事务底层原理但都只是大致流程,后续会针对每个 ...

angular核心原理解析3：指令的执行过程

指令的执行过程分析。

angular核心原理解析3：指令的执行过程相关推荐

最新文章

热门文章