壹 ? 引

我在前面花了两篇博客分别系统化介绍了angularjs中的directive指令与component组件，当然directive也能实现组件这点毋庸置疑。在了解完两者后，即便我们知道component就像删减版的directive，用法上大同小异，但两者在使用角度仍然存在不少差异，那么本文将详细对比两者，加深大家的认知，那么本文开始。

 贰 ? 区别详解

    Directive   Component  
bindings（用于父传值子）    NO    YES（绑定至控制器）  
bindToController    YES    NO  
compile function（编译函数）    YES    NO  
controller    YES    YES  
controllerAs    YES（默认flase）    YES（默认$ctrl）  
link functions（链接函数）    YSE    NO  
multiElement    YES    NO  
priority（组件优先权）    YES    NO  
replace    YES    NO  
require    YES    YES  
restrict    YES    NO（仅支持元素）  
scope    YES（绑定至scope）    NO（作用域总是隔离）  
template    YES    YES  
templateNamespace    YES    NO  
templateUrl    YES    NO  
terminal（优先权低的组件是否执行）    YES    NO  
transclude    YES（默认false）    YES（默认false）  

这是一份包含了指令directive与组件component全属性的表格，谁有谁没有已标注，至于具体用法可阅读博主先前完成的两篇博客。现在来说说两者表现不同：

1.创建与使用方式不同

在创建上，directive在指令名后是一个回调函数，函数内返回一个包含指令配置的对象，而component在组件名后紧接一个包含组件配置的对象。

在使用上，directive支持EMAC，即元素注释属性与类名，而component仅支持元素，因此component没有restrict，terminal，replace此类属性。

<!-- 指令 --> <!-- directive:directive-name --> <directive-name></directive-name> <div directive-name></div> <div class="directive-name"></div> <!-- 组件 --> <component-name></component-name>

angular.module(‘myApp‘, []) .controller(‘myCtrl‘, function ($scope) {}) .directive(‘directiveName‘, function () { return { //定义属性配置 } }) .component(‘componentName‘, { //定义属性配置 });

2.模板使用不同

指令directive在使用模板，不管是template或者templateUrl，都要求模板代码用一个根元素进行包裹，但component并没有这个要求。

angular.module(‘myApp‘, []) .controller(‘myCtrl‘, function ($scope) {}) .directive(‘directiveName‘, function () { return { template: ‘<span>1</span><span>2<span>‘, //错误 template： ‘<div><span>1</span><span>2<span></div>‘ //正确 } }) .component(‘componentName‘, { //定义属性配置 template: ‘<span>1</span><span>2<span>‘, //不会报错 });

3.父子传值表现不同