理解angularjs之自定义指令

     理解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，注意模板中调用外界方法的时候，传递的参数只能是一个对象，外界函数在接收参数的时候，形参也必须跟该对象的属性名相同。

终于大功告成，一个功能相对完善的组件就封装好了

 对于后续的完善与抽象，就需要根据实际工作的需要进行了，本文不再讲述了