angular.js指令中的controller、compile与link函数的不同之处
前言
算了算用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函数;我们可以思考一下上面会输出一下什么来.
从上面的输出结果我们可以得出两个结论:
- 他们的执行顺序不同,最先执行的是complie函数 ; 然后是controller函数,然后是pre函数,最后是post函数.
- 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")
}
}
});
上面指令执行时;会输出:
我们可以看到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>
结果如图:
可以参照上面的angularjs生命周期图来理解.
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。
相关推荐
-
浅谈Angularjs link和compile的使用区别
compile 想在dom渲染前对它进行变形,并且不需要scope参数 想在所有相同directive里共享某些方法,这时应该定义在compile里,性能会比较好 返回值就是link的function,这时就是共同使用的时候 link 对特定的元素注册事件 需要用到scope参数来实现dom元素的一些行为 以上就是小编为大家带来的浅谈Angularjs link和compile的使用区别全部内容了,希望大家多多支持我们~
-
基于angular中的重要指令详解($eval,$parse和$compile)
在angular的服务中,有一些服务你不得不去了解,因为他可以说是ng的核心,而今天,我要介绍的就是ng的两个核心服务,$parse和$compile.其实这两个服务讲的人已经很多了,但是100个读者就有100个哈姆雷特,我在这里讲讲自己对于他们两个服务的理解. 大家可能会疑问,$eval呢,其实他并不是一个服务,他是scope里面的一个方法,并不能算服务,而且它也基于parse的,所以只能算是$parse的另一种写法而已,我们看一下ng源码中$eval的定义是怎样的就知道了 $eval: fu
-
angularjs指令中的compile与link函数详解
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-link了. 大部分教程只是简单的说下compile会在ng内部用到,而且建
-
AngularJs html compiler详解及示例代码
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自定义新的HTML语法.compiler允许我们对任意HTML元素或属性,甚至是新的HTML标签.属性(如<beautiful girl="cf"></beautiful >)附加行为.Angular将这些附加行为称为directives. HTML有很多专门格式化静
-
Angular中$compile源码分析
$compile,在Angular中即"编译"服务,它涉及到Angular应用的"编译"和"链接"两个阶段,根据从DOM树遍历Angular的根节点(ng-app)和已构造完毕的 \$rootScope对象,依次解析根节点后代,根据多种条件查找指令,并完成每个指令相关的操作(如指令的作用域,控制器绑定以及transclude等),最终返回每个指令的链接函数,并将所有指令的链接函数合成为一个处理后的链接函数,返回给Angluar的bootstrap
-
Angular的Bootstrap(引导)和Compiler(编译)机制
在上节简单介绍了Angular js框架,在这节将继续Angular的Bootstrap(引导)和Compiler(编译)机制. 一:Bootstrap:Angular的初始化 1:Angular推荐的自动化初始如下: <!doctype html> <html xmlns:ng="http://angularjs.org" ng-app> <body> ... <script src="angular.js"> &l
-
angular.js指令中的controller、compile与link函数的不同之处
前言 算了算用angualrjs去做开发也有两个月了,但做为一个菜鸟,难免会被大神吊打(这里有一个悲伤的故事...).某天一位前端大神问我:你知道angular指令中的controller,compile,link函数有什么不同?然后我就一脸懵逼了....于是决定深入的去探究下. 今天我们来一起了解一下它们有什么不同的地方: 先看一段示例代码 var ag = angular.module("myApp",[]); ag.controller("myCtrl",[&
-
详解Angular.js指令中scope类型的几种特殊情况
前言 大家都知道在默认情况下,指令应该访问父作用域.如果我们对指令暴露了父控制器的scope,那么指令就可以自由的修改scope属性.在一些情况下,你的指令可能想要添加一些只有内部可以使用的属性和函数,如果我们都在父作用域中完成,可能会污染了父作用域,因此,我们有以下两种选择: 使用父作用域-如果不需要操作父作用域属性,不需要一个新的作用域,可以直接使用父作用域 scope:false 一个子作用域-这个作用域会原型继承父作用域 scope:true 一个隔离的作用域-一个全新的.不继承.独立存
-
angular.js指令中transclude选项及ng-transclude指令详解
前言 在开始本文之前,首先要说明我们使用的angular的版本是1.5.0,因为不同版本的表现结果不是那么相同. 首先我们应该了解到,在angular指令的选项中,有一项是transclude,这个选项有三种值:false,true,object:那这三种值分别表示什么,该如何选择? 下面我们来详细的说明一下. transclude字面意思就是嵌入,也就是说你需不需要将你的指令内部的元素(注意不是指令的模板)嵌入到你的模板中去,默认是false.如果你需要这种功能的话,那么就需要将transcl
-
Angular.js指令学习中一些重要属性的用法教程
Angular指令 定义一个指令的方法非常简单,只需要调用`directive`方法即可: var app=angular.module('myapp',[]); app.directive(name,fn) 1. 基础指令 var app=angular.module('myapp',[]); app.run(function($templateCache){ $templateCache.put('cache','<h3>模板内容来源于缓存</h3>') }); app.dir
-
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 启动本地静态服务器 其他 目标 一键安装项目所有的依赖模块 一键安装项目所有的依赖库 代码检查确保严格语法正确 能将angularjs的html装换成js模块并且压缩到js文件中 将所有css文件合并压缩 将所有的js文件合并压缩 动态引入资源文件 拥有开发环境和生产环境两种打包方式 工具 npm基于
-
Angular之指令Directive用法详解
项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐视频大漠穷秋 Angular实战 由于篇幅过长,列举大纲如下: 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构而使HTML拥有像jQuery一样效果具有交互性.不同于jQuery,Angular设计核心思想是通过数据与模板的绑定,摆脱繁琐的DOM操作,而将注意力集中在业务逻辑上. 几种常见指令ng-app 指令用来指定ng的作用域是在那个标签以内部分(<html ng-app="myApp&q
-
Angular.JS中的指令引用template与指令当做属性详解
一.引用template 对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能. 指令要生效,那么html头里面要 <html lang="en" ng-app="app"> 制定ng-app的值和定义指令的module名字一致: angular.module('app',[]) 指令的完整参数: angular.module('myApp', []) .directive('myDirective', function
-
Angular.JS中的指令与参数详解
指令,很重要! AngularJS与jQuery最大的区别在哪里?我认为,表现在数据双向绑定,实质就是DOM的操作形式不一样. JQuery通过选择器找到DOM元素,再赋予元素的行为: 而AngularJS则是,将指令与DOM绑定在一起,再扩展指令的行为. 所以AngularJS开发最理想的结果就是,在页面HTML与CSS的设计时,设计工程师只需要关注指令的使用:而在背后的逻辑开发上,架构工程师则是不需要知道如何操作DOM,只需要关注指令背后的行为要如何实现就行:测试工程师也可以开发针对指令的单
-
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
前言 最近在做一个项目改版,第一次在项目中真正使用Angular,和平时自己写写小demo,做做练习的感觉还是非常不同的,感觉非常的新鲜.有几个指令是经常用到的,这里由于这几个有点共性,所以一起介绍一下ng-if,ng-show/ng-hide,ng-switch 这几个指令.下面来看看详细的介绍: 共性 1.这里个指令都是Angular框架提供给我们的设置页面内容显示和隐藏的方法,使用起来非常方便,尤其是做业务逻辑. 2.都是通过一个表达式的值来实现切换显示的,只不过 ng-switch 可以