AngularJS 指令的执行过程分析

水深无声 2022-06-11 04:14 255阅读 0赞

笔记：

指令的执行分析过程主要分为Compile和link两个阶段

1.最简单的指令执行过程

<!DOCTYPE html>
    <html ng-app="MyModule">
    <head>
    <meta charset="utf-8">
    <title>指令最简单的执行过程</title>
    <script src="../Script/angular.min.js" type="text/javascript"></script>
    <script src="HelloAugular.js"></script>
    <link rel="stylesheet" href="../bootstrap-3.0.0/css/bootstrap.css">
    </head>
    <body>
       <hello></hello>
    </body>
    </html>

var myModule = angular.module("MyModule", []);
    myModule.directive("hello", function(){
        return {
        	restrict : 'E',
        	template : '<div> 你好，海哥！</div>',
        	replace  : true
        }
    });

2.link的执行过程

var myModule = angular.module("MyModule", []);
    myModule.directive("hello", function(){
        return {
        	restrict : 'E',
        	template : '<div> 你好，海哥！</div>',
        	replace  : true,
        	link: function(scope, el, attrs ,controller){     //自定义一个link函数
               console.log("<hello>...link...");              //控制台输出语句
        	}
        }
    });

3.link的执行过程(在元素里面绑定事件)

var myModule = angular.module("MyModule", []);
    myModule.directive("hello", function(){
        return {
        	restrict : 'E',
        	template : '<div> 你好，海哥！</div>',
        	replace  : true,
        	link: function(scope, el, attrs ,controller){     //自定义一个link函数，绑定事件
                //console.log("<hello>...link...");
                el.on("mouseenter", function() {       //鼠标事件
                    console.log("鼠标进入...");        //控制台输出语句
                });            
        	}
        }
    });

4.Compile的执行过程

<!DOCTYPE html>
    <html ng-app="MyModule">
    <head>
    <meta charset="utf-8">
    <title>Compile的执行过程</title>
    <script src="../Script/angular.min.js" type="text/javascript"></script>
    <script src="HelloCompile.js"></script>
    <link rel="stylesheet" href="../bootstrap-3.0.0/css/bootstrap.css">
    </head>
    <body>
      <div alotofhello="5" style="text-align: center;">
          <p>夏天到了，好热啊！</p>
      </div>
    </body>
    </html>

var myModule = angular.module("MyModule", []);
    myModule.directive('alotofhello', function(){
        return {
        	restrict: 'A',
        	compile :function(el,attrs,transclude){    //transclude表示是否对指令进行一些变换
        		//从这里开始对标签元素自身进行一些变换
        		console.log("指令编译...");
        		var tpl = el.children().clone();     //元素克隆，并作为模板保存下来
        		console.log(tpl);
        		for (var i = 0; i < attrs.alotofhello - 1; i++) {
        			el.append(tpl.clone());
        		}
        		return function(scope,el,attrs,controller){
        			console.log("指令链接...");
        		}
        	},
        	link:function(){     //如果同时提供Compile和link，这个link是没有用的；所以不能同时提供compile和link
        		 console.log("我自己的link函数...");
        	}
        }
    });

5.Compile和link函数实例的执行过程比较

<!DOCTYPE html>
    <html ng-app="MyModule">
    <head>
    <meta charset="utf-8">
    <title>compile和link函数的执行实例</title>
    <script src="../Script/angular.min.js" type="text/javascript"></script>
    <script src="HelloAngularCom.js"></script>
    <link rel="stylesheet" href="../bootstrap-3.0.0/css/bootstrap.css">
    </head>
    <body>
    <div ng-repeat="i in [1,2]">	
    	<div repeater="2">
    		<p>
    		你好，再见！
    		</p>		
    	</div>
    </div>
    </body>
    </html>

var myModule = angular.module("MyModule", []);
    myModule.directive('repeater', function() {
        return {
        	restrict: 'A',
        	compile: function(el, attrs, transclude){
        		 //这里开始对标签元素自身进行一些变换
        		 console.log("repeat...compile...");
    
        		var tpl = el.children().clone();            
                for (var i = 0; i < attrs.repeater - 1; i++) {
                    el.append(tpl.clone());
                }
    
                //返回link函数
                return function(scope, el, attrs, controller) {
                    console.log("repeat...link...");
                }
        	}
        }
    });

总结：

![Center][]

[Center]: /images/20220611/00cd1dc436d04ee693f17677df869cdb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，255人围观）

还没有评论，来说两句吧...

相关阅读

相关 AngularJS 世界------AngularJS 指令手册

AngularJS 内置指令的基本说明 AngularJS 内置的指令 <table> <thead> <tr> <th>序号</th>

痛定思痛。/ 2023年02月08日 13:00/ 0 赞/ 64 阅读

相关计算机指令执行过程详解

一、计算机的基本组成冯·诺依曼计算机的特点（机器以运算器为中心） 1. 计算机由控制器（分析和执行机器指令并控制各部件的协同工作）、运算器（根据控制信号对数据进行算术

淡淡的烟草味﹌/ 2023年01月01日 03:40/ 0 赞/ 221 阅读

相关中央处理器——指令执行过程

文章目录指令周期几种常见的指令周期指令周期流程指令周期的数据流取指周期

本是古典何须时尚/ 2022年10月15日 08:57/ 0 赞/ 207 阅读

相关寄存器执行指令过程

[http://orangelsk.zone/][http_orangelsk.zone] 文章中涉及的机器默认为`8086CPU`和`8086PC机` 寄存器

今天药忘吃喽~/ 2022年09月09日 09:11/ 0 赞/ 257 阅读

相关 AngularJS 指令

指令（directives）是任何AngularJS应用中最重要的成分。尽管AngularJS已经自带了很多指令，你经常会发现需要自己亲手创建一些特别的指令。本文将会带你了解自

向右看齐/ 2022年08月21日 07:56/ 0 赞/ 292 阅读

相关 AngularJS(二)——认识AngularJS的指令系统

The first girlfriend – AngularJS 前言: 女神的华丽长袍 ![来了--女神的华丽长袍][--] --------------

╰半夏微凉°/ 2022年06月17日 03:59/ 0 赞/ 289 阅读

相关 AngularJS 指令的执行过程分析

笔记：指令的执行分析过程主要分为Compile和link两个阶段 1.最简单的指令执行过程 <!DOCTYPE html> <html n

水深无声/ 2022年06月11日 04:14/ 0 赞/ 256 阅读

相关 angularJS 指令解释

[angularJS 指令解释][angularJS] 本文引自 http://blog.csdn.net/kongjiea/article/details/4

た入场券/ 2022年06月05日 09:55/ 0 赞/ 279 阅读

相关 AngularJS 指令

什么是 AngularJS？ AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。 Angul

ゝ一纸荒年。/ 2022年05月09日 07:40/ 0 赞/ 333 阅读

相关 AngularJs 指令

AngularJs框架指令(可以理解为属性) 在标签指令中书写的NG变量不用带$scope. 1、边界指令ng-app

爱被打了一巴掌/ 2021年07月24日 20:18/ 0 赞/ 543 阅读