理解angularjs之自定义指令尽管angularjs目前受关注程度远远低于Vuejs与reactjs，但对于从那个时代过来的前端来说，angular仍然是一个避不开的话题，况且以前大部分的项目都是采用angular进行开发。因此当你去了一家公司维护老项目以及升级版本的时候，就不得不去阅读别人的代码，你就很可能会接触到angular的项目。所以，理解angular还是很有必要的。但是，angularjs对于初学者来说确实不大友好，繁琐的语法，晦涩的自定义指令（即Vue中的组件）语法，往往给初学者带来很大困扰。本文旨在用浅显移动的话以及简单的demo解释angular的自定义指令，希望能给初学者一点小小的帮助。什么是自定义指令呢？随着前端技术的快速发展，现在前端技术早已过了jQuery以及模块化的时代，而进入了组件化、虚拟DOM的时代。angular中没有组件的概念，跟组件类似的是以元素形式存在的自定义指令，本文所说的自定义指令专指组件，下文用组件指代自定义指令。关于angular的基础知识本文不再涉及，如果你还不知道angular的基础，请自行查阅相关文档。封装组件自然是为了代码的复用，那么怎么封装组件呢？
1、创建angular实例：var app = angular.module('myapp', []);
2、调用app挂载的directive方法，该方法接受两个参数，第一个参数是组件名，第二个参数是匿名函数,该函数必须返回一个对象
这样一个简单的组件就封装好了，你可以在页面中使用例如在app的区域内使用，页面就会显示hello world。不过这个组件的功能很单一，而且模板内的数据都是死的，达不到我们对于组件的要求。下面我们慢慢完善.
给返回的对象添加配置项
replace: true,表示是否要将组件替换，浏览器并不认识未经解析的组件，我们设置为true;
transclude: true,处理指令里面的dom在哪里显示，给模板的某个dom节点添加ng-transclude，就是把指令的innerHTML放到模板的那个节点上
link就相当于controller，给模板提供方法和属性.
scope当前模板的作用域，element模板的最外层元素，attrs就是当前指令上所有的属性
现在我们的组件就成了这样；
在页面上使用：<hello>我将会显示在具有ng-transclude属性的标签内</hello>,
数据依旧是写死了的，那么要怎么从外界传递数据进来呢？这到了angularjs最难以理解的部分了
配置scope： 这时我们的模板变为
scope:{book:'@booc',title:'=bookTitle',changeTitle:'&',color:'=colorTitle'}
调用组件
<hello booc="boo" color-title="c" book-title="t" change-title="sayName(name,money)">
{{content}}
</hello>
angularjs为我们想了一个办法来传递数据——通过自定义属性的形式，scope配置项中出现了三个特殊符号——@，=，&，为我们指定了属性传递的格式。
@表示模板中的book变量的值通过外界的booc这个属性传递进来，并且传递的值只能是字符串，即本例中boo是字符串；
=表示模板中的title变量的值通过外界的bookTitle这个属性传值进来，并且传递的只能是变量，也就是说在本例中t是一个变量，注意scope中的驼峰形式的名称在调用组件时必须写成中划线形式；
&表示从外界传递一个方法进来；本例模板中的changeTitle通过外界的change-title属性传递进来，即外界的sayName方法最终赋给了changeTitle，注意模板中调用外界方法的时候，传递的参数只能是一个对象，外界函数在接收参数的时候，形参也必须跟该对象的属性名相同。
终于大功告成，一个功能相对完善的组件就封装好了
对于后续的完善与抽象，就需要根据实际工作的需要进行了，本文不再讲述了
