Question

AngularJS自定义Directive中link和controller的区别

Answer 1

使用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的模版写死的，仅侧重于提供数据源和操作。