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

Posted 2020-06-08

 

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