AngularJS 指令的执行过程分析

来源：互联网发布：js focus自动获取焦点编辑：程序博客网时间：2024/06/05 17:26

笔记：

指令的执行分析过程主要分为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...");            }    }    }});

总结：

阅读全文

0 0