之前我们已经介绍了所有的AngularJS 基础知识，下面让我们通过实例来加深记忆，体验自定义指令的乐趣。

带你走近AngularJS系列：

我们展示的第一个例子是手风琴效果指令：

效果图如下：

不使用AngularJS的纯HTML源码如下：

以上纯 HTML源码也可以实现手风琴效果，但是它仅仅是一些标记，包含了大量的链接和id，不利于维护。

使用AngularJS自定义指令结合以下HTML源码同样可以得到预期效果：

这一版使用的HTML标记更少，看起来清晰且易维护。

下面，让我们看下指令写法。

由于拥有内部HTML内容，所以设置指令的transclude 属性为true。模板使用ng-transclude 指令来声明对应的显示内容。由于模板中只有一个元素，所以没有设置其他选项。

代码中最有趣的部分是link 方法。它在参数element具有id时启作用，如果没有，会依据指令的 Scope自动创建ID。一旦元素拥有了ID值，方法将通过jQuery来选择具有"accordion-toggle"类的子元素并且设置它的 "data-parent" 和 "href" 属性。最后，通过寻找“accordion-body” 元素，并且设置"collapse" 属性。

指令同时声明了一个拥有空方法的controller 。声明controller 是必要的，因为Accordion会包含子元素，子元素将检测父元素的类型和controller 。

这一步比较容易，大多数操作将在这个模板中发生，但是它仅仅需要少量的代码：

require 属性值为"btstPane" ，所以该指令必须用于指令"btstAccordion"中。transclude 属性为true表明选项卡包含HTML标签。scope 下的 "title" 属性将会被实例所替代。

这个例子中的模板比较复杂。注意我们通过ng-transclude 指令来标记元素接收文本内容。

模板中"{{title}}" 属性将会显示标签名称。目前我们仅仅实现了纯文本显示，没有定义其样式。我们使用link 方法可以替换标题为HTML源码从而得到更丰富的样式。

就这样，我们完成了第一个具有实用价值的指令。它功能并不复杂但是足以展示一些AngularJS的重要知识点和技术细节：如何定义嵌套指令，如何生成唯一的元素ID，如何使用jQuery操作DOM以及如何使用$watch 方法监听scope变量的变化。

下一个例子是创建Google地图的指令：