angular.js指令中控制器、编译和链接函数的区别

序

已经有两个月没有使用angualrjs进行开发了，但是作为一个菜鸟，难免会被大神打败(这里有一个悲伤的故事.).有一天，一个前端神问我：你知道角指令中控制器、编译、链接链接函数的区别吗？然后我看起来惊呆了.所以我决定深入探索。

今天，让我们来看看它们之间的区别。

让我们从一个示例代码开始

var ag=angular.module('myApp '，[])；ag.controller('myCtrl '，['$rootScope '，function($ rootScope){ }])；ag.directive('order '，function(){ return { restrict : ' AE '，controller:function($scope，$element，$attrs，$ trans clude){ console . log(' controller ')；}，compile:function(tElement，tAttrs，trans clude){ console . log(' compile ')；返回{ 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 ')} })；我们可以看到控制器、编译器和链接函数都写在订单指令中；我们可以考虑它会输出什么。

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

它们的执行顺序不同，第一个是complie函数。然后是控制器功能，然后是前置功能，最后是后置功能。不执行链接功能。首先，我们来解释一下第一个问题。看下面的图片

从图中我们可以看到，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:函数(作用域、元素、iattrs、控制器){//子元素链接后执行}}}})第二个阶段是链接阶段：

链接函数将模板与范围链接起来；负责设置事件监听器，监控数据变化和实时操作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，$ trans clude){ console . log(' controller ')；}，link:function(scope，iElement，iAttrs，controller){ console . log(' link ')} } })；当执行上述指令时；将输出：

我们可以看到，首先执行控制器功能，然后是链接功能，但是控制器、链接链接功能会在链接阶段执行。那么它们之间有什么区别呢？在什么情况下应该用哪个？

答案是：

指令控制器和链接功能可以互换。控制器主要用于提供指令间可重用的行为，但链接函数只能定义当前内部指令中的行为，不能在指令间重用。链接功能可以将指令相互隔离，而控制器定义可重用的行为。一些实用的建议：

如果我们想将当前指令的API公开给其他指令，可以使用controller参数，否则可以使用link来构造当前指令元素的功能。如果我们使用范围。$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=' http 3360./plugins/angular js/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，$ trans clude){ console . log(' parent controller ')；}，compile : function(Templent，tAttrs，transclude){ console.log('父编译')；返回{ 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，$ trans clude){ console . log(' child controller ')；}，compile:function(tElement，tAttrs，transclude){ console.log('子编译')；返回{ pre:function(scope，iElement，iAttrs，controller){ console . log(' child pre ')}，post:function(scope，iElement，iAttrs，controller){ console . log(' child post ')} } } } } })；/script/body/html的结果如图3360所示

可以参考上面的angularjs生命周期图来理解。

摘要

以上就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。