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

在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属性成对出现。