ionic-directives的使用心得

        最近项目中用到了more/less,所以才接触到这个directives。

        指令（Directives）是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令，但还是经常需要创建应用特定的指令。      

        一个指令用来引入新的HTML语法。指令是DOM元素上的标记，使元素拥有特定的行为。举例来说，静态的HTML不知道如何来创建和展现一个日期选择器控件。让HTML能识别这个语法，我们需要使用指令。指令通过某种方法来创建一个能够支持日期选择的元素。我们会循序渐进地介绍这是如何实现的。 如果你写过AngularJS的应用，那么你一定已经使用过指令，不管你有没有意识到。你肯定已经用过简单的指令，比如 ng-mode, ng-repeat, ng-show等。这些指令都赋予DOM元素特定的行为。例如，ng-repeat 重复特定的元素，ng-show 有条件地显示一个元素。如果你想让一个元素支持拖拽，你也需要创建一个指令来实现它。指令背后基本的想法很简单。它通过对元素绑定事件监听或者改变DOM而使HTML拥有真实的交互性。

        中间也查了很多资料，发现google出来的文章比国内百度的好的简直不要太多。建议以后大家查资料尽量去google，一个是比较新，一个是比较靠近问题，不想国内大多都是讲一个demo，那没什么用，也解决不了项目中的问题。

       好了，今天给大家分享一下项目中使用到这个directives的过程以及代码，也是自己的一个记录。

       下图是项目中要使用的more/less，通过ngif当然也可以完成了，但是就是没办法知道多高的时候来显示更多，这就意味着需要操作dom，现在呢，来看下使用directives的目的。

首先directive也是angular原生的，renderer,renderer2也是原生api里面的，大家可以点进去看一下。

这是html代码。

这是css代码，其实可以实现代码简化的，这是刚开始不断的实验，不断的修改代码，最终定的这版，还没来得及去简化。

ngOnInit()方法是初始化方法，这个不用说了，ngAfterViewInit()方法是在页面加载完成之后会加载这个方法，有的人会讲，为什么初始化要分成两个方法。因为在页面加载并没有完成的时候，这时候去设置css，效果是出不来的，具体大家可以去试一下。

HostListener()这个方法是绑定的 onClick事件，大家可以打印一下event，刚开始我写的是event.path[0] == this.moreBtn 这个在浏览器上是没有任何毛病的，但是一旦运行到手机上，将看不到任何的效果，说实话我也不知道为什么了，可能是这个手机跟web机制的问题。后来改成了event.target == this.moreBtn。

renderer.setElementStyle跟renderer2.removeStyle 通过这两个方法去设置和移除你取得的类名所在的div或者什么标签的css的。

好了，more/less就用到这么多功能。以后还是要研究他的，还有很多功能要做，以后再补充。