一.指令中controller与link的区别
我们都知道在ng的指令中,返回的对象中有两个重要的属性:
// link function { link: function(scope, iElem, iAttrs, ctrl) { ... }, controller: function($scope, $element, $attrs) { ... } }
这两个都可以获取到作用域,元素,属性等引用,也都会执行一次,在我还是个ng菜鸟的时候,当然,现在也还是,当我每次想要扩展个自定义指令时,脑海中总是萦绕着“where the fuck should I put my code?”,在controller,还是link function中呢。
简短的回答是:优先放在 link function 中。当然啦,这要取决于你想要你的代码什么时候运行。
Before compilation? – Controller After compilation? - Link function
另外,他们的基本区别是:
a.控制器可以暴露一个API,而link可以通过require与其他的指令控制器交互
b.所以如果要开放出一个API给其他指令用就写在controller中,否则写在link中
二.执行先后问题
首先,看下面一个很有趣的示例:log-compile指令。
index.html
<!doctype html> <html ng-app="compilation"> <head> <meta charset="utf-8"> <title>Compilation Demo</title> <link rel="stylesheet" href="style.css"> <script src="http://code.angularjs.org/1.1.1/angular.js"></script> <script src="app.js"></script> </head> <body> <div log-compile="parent"> <div log-compile="..child 1"> <div log-compile="....child 1 a"></div> <div log-compile="....child 1 b"></div> </div> <div log-compile="..child 2"> <div log-compile="....child 2 a"></div> <div log-compile="....child 2 b"></div> </div> </div> <!-- LOG --> <pre>{{log}}</pre> </body> </html>
app.js
angular.module('compilation', []) .directive('logCompile', function($rootScope) { $rootScope.log = ""; return { controller: function($scope, $attrs) { $rootScope.log = $rootScope.log + ($attrs.logCompile + ' (controller)\n'); }, compile: function compile(element, attributes) { $rootScope.log = $rootScope.log + (attributes.logCompile + ' (compile)\n'); return { pre: function preLink(scope, element, attributes) { $rootScope.log = $rootScope.log + (attributes.logCompile + ' (pre-link)\n'); }, post: function postLink(scope, element, attributes) { element.prepend(attributes.logCompile); $rootScope.log = $rootScope.log + (attributes.logCompile + ' (post-link)\n'); } }; } }; }) .directive('terminate', function() { return { terminal: true }; });
style.css
div { padding: 5px; margin: 5px; background-color: #EEE; border: 1px solid #BBB; } div > div { background-color: #DDD; } div > div > div { background-color: #CCC; } ol { list-style: decimal; margin-left: 30px; }
运行结果:
通过这个实例,我们可以知道,子级指令的所有 link function :包括 pre 和 post 两个link都会在父级的post link之前被执行,我们通常所说的link function,其实是 post link 的快捷方式罢了。
所以,像下面这个例子中,这样用,是会有问题的:
index.html
<!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <link rel="stylesheet" href="style.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://code.angularjs.org/1.1.5/angular.js"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <example-directive></example-directive> (above should actually say "hi there", not "bar") </body> </html>
app.js
var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope, $element) { }); app.directive('exampleDirective', function() { return { restrict: 'E', template: '<child-directive></child-directive>', controller: function($scope, $element){ // this will not work, since the child directives link // function was not yet run $element.find('pre').text('hi there!'); }, link: function(scope, el){ // the logic really belongs in link, as the child directive // uncomment this line to fix the problem // el.find('pre').text('hi there!') } } }); app.directive('childDirective', function() { return { restrict: 'E', template: '<h1>bar</h1>', replace: true, link: function($scope, $element, attr){ // some awesome jquery pluggin which replaces things and bits $element.replaceWith(angular.element('<pre>' + $element.text() + '</pre>')); } } });
运行结果:
说明 link 在 ctrl 之后执行的一个例子,上面这个例子非常给力,值得学习。
相关推荐
某天一位前端大神问我:你知道angular指令中的controller,compile,link函数有什么不同?然后我就一脸懵逼了….于是决定深入的去探究下。 今天我们来一起了解一下它们有什么不同的地方: 先看一段示例代码 var ag =...
主要介绍controller link一般连接
Controller A可以返回redirect和forward指令来进行跳转到Controller A,但这不属于本文讨论的场景。 显然不应该通过直接创建Controller B的实例,再调用方法来完成。因为Controller B的实例中,Spring Boot为其...
本文主要介绍AngularJS ng-controller 指令,这里对ng-controller指令资料的整理,并附代码示例和效果图,有需要的朋友看下
Arduino-k3ng_rotator_controller.zip,业余无线电旋转控制器,Arduino是一家开源软硬件公司和制造商社区。Arduino始于21世纪初,深受电子制造商的欢迎,Arduino通过开源系统提供了很多灵活性。
ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。 AngularJS 实例 名字: var app = angular.module(‘myApp’, []); app.controller(‘myCtrl’, function($scope) { $scope.name = “John Doe”...
BIG-IP 链路控制器 对多个WAN ISP连接的可用性和性能进行无缝...BIG-IP 链路控制器 充分利用了F5的TMOS构架,从而改进链路性能与出色的可用性,同时还可提供灵活强大的状态检查功能,完善的安全性以及改进的易用性。
今天小编就为大家分享一篇基于Angular中ng-controller父子级嵌套的相关属性详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
nginx-ingress资源清单,下载完成后直接apply即可,如果镜像下载有问题可以先pull下来镜像文件,再部署
TP-LINK打印服务器应用设置指南-Mac系统打印服务器系统
F5 Link Controller配置指南 LC Outbound流量均衡部分配置 Outbound的高级配置-根据运营商选择线路
F5+Link+Controller配置指南
原生Servlet与Spring Controller性能比较 Controller项目
本文介绍了Grbl Controller安装与使用教程,是使用Grbl Controller的入门基础必读文件。
Android 蓝牙 HCI数据收发流程图,host将指令发送给controller,将Android 源码使用流程图的形式画了出来,使Android 蓝牙开发者更清楚数据收发走向,代码流程更加形象生动,能够很快的熟悉Android 蓝牙源码,利于...
AngularJS ng-change 指令 AngularJS 实例 当输入框的值改变时执行函数: <!DOCTYPE html> <html> <head> <meta charset=utf-8> [removed][removed] </head> <body ng-app=myApp>...
计算机组成与系统设计-Project-Cahce Controller
F5+BIGIP+LinkController+v9+配置指南v3
AT7912E spacewire控制器 Single SpaceWire link High Speed Controller