angular.js指令中的controller、compile与link函数的不同之处


Posted in Javascript onMay 10, 2017

前言

算了算用angualrjs去做开发也有两个月了,但做为一个菜鸟,难免会被大神吊打(这里有一个悲伤的故事...)。某天一位前端大神问我:你知道angular指令中的controller,compile,link函数有什么不同?然后我就一脸懵逼了....于是决定深入的去探究下。

今天我们来一起了解一下它们有什么不同的地方:

先看一段示例代码

var ag = angular.module("myApp",[]);
  ag.controller("myCtrl",["$rootScope",function($rootScope){

  }]);
  ag.directive("order",function(){
   return{
    restrict:"AE",
    controller:function($scope, $element, $attrs, $transclude) {
     console.log("controller");
    },
    compile:function(tElement, tAttrs, transclude){
     console.log("compile");
     return{
      pre:function(scope, iElement, iAttrs, controller){
       console.log("pre")
      },
      post:function(scope, iElement, iAttrs, controller){
       console.log("post")
      }
     }
    },
    link:function(scope, iElement, iAttrs, controller){
     console.log("link")
    }
   }
  });

我们可以看到什么order指令中写了controller, complie, link函数;我们可以思考一下上面会输出一下什么来.

angular.js指令中的controller、compile与link函数的不同之处

从上面的输出结果我们可以得出两个结论:

  • 他们的执行顺序不同,最先执行的是complie函数 ; 然后是controller函数,然后是pre函数,最后是post函数.
  • link函数没有执行.

首先我们来解释第一个问题;看下图

angular.js指令中的controller、compile与link函数的不同之处

从图中我们可以看到整个 AngularJs 的生命周期分为两个阶段:

第一个阶段是编译阶段:

在编译阶段,AngularJS会遍历整个HTML文档并根据JavaScript中的指令定义来处理页面上声明的指令。每一个指令的模板中都可能含有另外一个指令,另外一个指令也可能会有自己的模板。当AngularJS调用HTML文档根部的指令时,会遍历其中所有的模板,模板中也可能包含带有模板的指令.一旦对指令和其中的子模板进行遍历或编译,编译后的模板会返回一个叫做模板函数的函数。我们有机会在指令的模板函数被返回前,对编译后的DOM树进行修改。

ag.directive("order",function(){
 return{
  restrict:"AE",
  compile:function(tELe ,tAttrs,transcludeFn){
    //进行编译后的dom操作
    return{
      pre:function(scope, iElement, iAttrs, controller){
       // 在子元素被链接之前执行
       // 在这里进行Dom转换不安全
      },
      post:function(scope, iElement, iAttrs, controller){
       // 在子元素被链接之后执行
      }
     }
  }
 }
})

第二个阶段是链接阶段:

链接函数来将模板与作用域链接起来;负责设置事件监听器,监视数据变化和实时的操作DOM.链接函数是可选的。如果定义了编译函数,它会返回链接函数,因此当两个函数都定义了时,编译函数会重载链接函数.(解释上面的结论2)

var ag = angular.module("myApp",[]);
  ag.controller("myCtrl",["$rootScope",function($rootScope){

  }]);
  ag.directive("order",function(){
   return{
    restrict:"AE",
    controller:function($scope, $element, $attrs, $transclude) {
     console.log("controller");
    },
    link:function(scope, iElement, iAttrs, controller){
     console.log("link")
    }
   }
  });

上面指令执行时;会输出:

angular.js指令中的controller、compile与link函数的不同之处

我们可以看到controller函数先执行,然后是link函数.但是链接阶段会执行controller,link函数;那么他们有什么不同;我们在什么情况该用哪个?

答案是:

指令的控制器和link函数可以进行互换。控制器主要是用来提供可在指令间复用的行为,但链接函数只能在当前内部指令中定义行为,且无法在指令间复用.link函数可以将指令互相隔离开来,而controller则定义可复用的行为。
实际使用的一些建议:

如果我们希望将当前指令的API暴露给其他指令使用,可以使用controller参数,否则可以使用link来构造当前指令元素的功能性。如果我们使用了scope.$watch()或者想要与DOM元素做实时的交互,使用链接会是更好的选择。

到这里:我们应该有一点了解这三者有什么差异了吧?其实这个问题考的就是我们对AngularJs生命周期的了解.

最后我们用一个实际例子来看一下AngularJs的生命周期:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
 <div parent>
  <div child></div>
 </div>
<script src="../plugins/angularjs/angular.src.js"></script>
<script>
 var ag = angular.module("myApp",[]);
  ag.controller("myCtrl",["$rootScope",function($rootScope){

  }]);
  ag.directive("parent",function(){
   return{
    restrict:"AE",
    controller:function($scope, $element, $attrs, $transclude) {
     console.log("parent controller");
    },
    compile:function(tElement, tAttrs, transclude){
     console.log("parent compile");
     return{
      pre:function(scope, iElement, iAttrs, controller){
       console.log("parent pre")
      },
      post:function(scope, iElement, iAttrs, controller){
       console.log("parent post")
      }
     }
    }
   }
  });
 ag.directive("child",function(){
  return{
   restrict:"AE",
   controller:function($scope, $element, $attrs, $transclude) {
    console.log("child controller");
   },
   compile:function(tElement, tAttrs, transclude){
    console.log("child compile");
    return{
     pre:function(scope, iElement, iAttrs, controller){
      console.log("child pre")
     },
     post:function(scope, iElement, iAttrs, controller){
      console.log("child post")
     }
    }
   }
  }
 });
</script>
</body>
</html>

结果如图:

angular.js指令中的controller、compile与link函数的不同之处

可以参照上面的angularjs生命周期图来理解.

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
纯css+js写的一个简单的tab标签页带样式
Jan 28 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
javascript实现商品图片放大镜
Nov 28 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 #Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 #Javascript
JavaScript通过filereader接口读取文件
May 10 #Javascript
关于vue-router路径计算问题
May 10 #Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 #Javascript
Bootstrap table使用方法总结
May 10 #Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 #Javascript
You might like
改进的IP计数器
2006/10/09 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
python解析xml文件操作实例
2014/10/05 Python
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
python list格式数据excel导出方法
2018/10/31 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
python pygame实现方向键控制小球
2019/05/17 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
十八届三中全会宣传方案
2014/02/21 职场文书
品质主管岗位职责
2014/03/16 职场文书
会计个人实习计划书
2014/08/15 职场文书
mysql中关键词exists的用法实例详解
2022/06/10 MySQL