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 相关文章推荐
javascript 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
jQuery实现简单二级下拉菜单
Apr 12 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
jquery zTree异步加载简单实例讲解
Feb 25 Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 Javascript
JavaScript实现弹出广告功能
Mar 30 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
vue 组件内获取actions的response方式
Nov 08 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
laravel-admin的图片删除实例
2019/09/30 PHP
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
Python里隐藏的“禅”
2014/06/16 Python
在Python中使用元类的教程
2015/04/28 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
详解python3中tkinter知识点
2018/06/21 Python
pycharm安装和首次使用教程
2018/08/27 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
Python列表list操作相关知识小结
2020/01/29 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
性能服装:HYLETE
2018/08/14 全球购物
机械专业毕业生自荐信
2013/11/02 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
正规欠条模板
2015/07/03 职场文书
SQL CASE 表达式的具体使用
2022/03/21 SQL Server
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android