还是先从栗子们看起~
如果我想实现这样一个功能，当一个input失去光标焦点时(blur)，执行一些语句，比如当输入用户名后，向后台发ajax请求查询用户名是否已经存在，好有及时的页面相应。
输入 hellobug
失去焦点后提示 hellobug 这个用户名已经存在
代码如下：
HTML 1 2 3 4 5 6 <body ng-controller="MainCtrl"> <lable>用户名: <input type="text" ng-model="username" ng-blur="checkUsername()" /> <span style="color:red;" ng-show="usernameAlreadyExist">用户名已经存在</span> </lable> </body> controller和directive的定义 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 app.controller('MainCtrl', function($scope) { $scope.checkUsername = function() { //send ajax to check on server if ($scope.username === 'hellobug') { $scope.usernameAlreadyExist = true; } } }); app.directive('ngBlur', function($document) { return { link: function(scope, element, attrs) { $(element).bind('blur', function(e){ scope.$apply(attrs.ngBlur); }); } } })在上面的例子里，directive返回对象里定义的link方法在blur事件触发时执行了scope上的checkUsername()方法。
如果是只有link方法，也可以简单的写成下面这种形式~直接返回link对应的function~
directive的简单写法 1 2 3 4 5 6 7 app.directive('ngBlur', function($document) { return function(scope, element, attrs) { $(element).bind('blur', function(e){ scope.$apply(attrs.ngBlur); }); }; })再来这样一个功能，我想让内容为哈哈哈哈的dom元素重复n遍，n是自定义的，以达到某种满屏大笑丧心病狂的效果 -_-，我知道ng-repeat就已经能干这事儿了，但是如果自己实现一下呢~
HTML 1 2 3 <ul repeater="20"> <li>哈哈哈哈</li> </ul> directive的定义 1 2 3 4 5 6 7 8 9 10 11 app.directive('repeater', function($document) { return { restrict: 'A', compile: function(element, attrs) { var template = $(element).children().clone(); for(var i=0; i<attrs.repeater - 1; i++) { $(element).append(template.clone()); } } } });在上面例子的compile方法里，子元素被复制成了repeater制定的数量。
什么时候用compile，什么时候用link呢，或者两者可不可以一起用呢？
先从directive是如何在angular手下生效的说起吧~
将html转化成dom，所以自定义的html标签必须符合html的格式
搜索匹配directive，按照priority排序，并执行directive上的compile方法
执行directive上的link方法，进行scope绑定及事件绑定
简单的说就是为了解决性能问题，特别是那种model变化会影响dom结构变化的，而变化的结构还会有新的scope绑定及事件绑定，比如ng-repeat
本节目所用示例可以猛戳这里查看ho~
http://hellobug.github.io/blog/angularjs-directive-2-compile-vs-link/
