在AngularJS中，自定义Directive过程中，有时用link和controller都能实现相同的功能。那么，两者有什么区别呢？
使用link函数的Directive
页面大致是：
<button id="addItem">Add Item</button>
<without-Controller datasource="customers" add="addCustomer"></without-Controller>
Directive方面：
(function(){
var withoutController = function(){
var tempalte = '<button id="addItem">Add Item</button><div></div>';
var link = function(scope, element, attrs){
//从scope中的datasource拿到数据源
var items = angular.copy(scope.datasource),
button = angular.element(document.getElementById('addItem'));
button.on('click', addItem);
render();
function addItem(){
var name = 'new customer';
//执行Directive中传入的方法，带参数
scope.$apply(function(){
scope.add()(name);
});
items.push({
name: name
});
render();
}
function render(){
var html = '<ul>';
for(var i=0, len=item.length;i<len;i++){
html += '<li>' + items[i].name + '</li>'
}
html += '</ul>';
element.find('div').html(html);
}
};
reutrn {
restrict: 'EA',
scope: {
datasource: '=',
add: '&'
},
link: link,
template: template
}
};
angular.module('directiveModule')
.directive('withoutController', withoutController);
}());使用controller的Directive
页面大致是：
<with-controller datasource="customers" add="addCustomer"></with-controller>
Directive方面：
(function(){
var withController = function(){
var template = '<button ng-click="addItem()">Add Item</button><ul>' + '<li ng-repeat="item in items">{{::item.name}}</li></ul>',
controller = ['$scope', function($scope){
init();
function init(){
$scope.items = angular.copy($scope.datasource);
}
$scope.addItem = function(){
var name = "customer new";
$scope.add()(name);
$scope.items.push({
name: name
});
}
}];
return {
restrict: 'EA',
scope: {
datasource: '=',
add:'&'
},
controller: controller,
template:template
}
};
angular.module('directiveModule')
.direcitve('withController', withController);
}());可见，link和controller的相同点在于里面都可包含数据源和操作。不同点在于：link能控制渲染html元素的过程，而controller不能，controller的模版写死的，仅侧重于提供数据源和操作。
如果使用controllerAs，Directive大致是：
(function(){
var withController = function(){
var template = '<button ng-click="vm.addItem()">Add Item</button><ul>' + '<li ng-repeat="item in vm.items">{{::item.name}}</li></ul>',
controller = function(){
var vm = this;
init();
function init(){
vm.items = angular.copy($scope.datasource);
}
vm.addItem = function(){
var name = "customer new";
vm.add()(name);
vm.items.push({
name: name
});
}
}
return {
restrict: 'EA',
scope: {
datasource: '=',
add:'&'
},
controller: controller,
controllerAs: 'vm',
bindToController:true,
template:template
}
};
angular.module('directiveModule')
.direcitve('withController', withController);
}());其中，controllerAs和bindToController属性成对出现。