标题定的是angularjs与bootstrap相结合实现手风琴菜单，其实也就是用的bootstrap的样式。

在上篇文章给大家介绍了。接着学习实现的Demo。

主要练习自定义指令，向指令中传递参数，老规矩先上效果图：

上面是我自定义的指令，菜单存在标题和内容3条用了 ng-repeat来渲染。

指令基本API如下：

E（元素）C（类名）M（注释） //这里考虑到浏览器的兼容性通常我们用所有浏览器都认识的A类型 restrict: 'A',//优先级设置,默认是0,较大的优先调用 priority: 0,//这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令优先级相同的指令还是会被执行。 terminal: false,//字符串或函数: 字符串(指令内容) //注：必须存在一个根DOM元素 //一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个代表模板的字符串 //function(tElement,tAttrs) { ... } template: '',//从指定的URL地址加载模板 templateUrl: '',//如果设置了这个参数，值必须为true replace: false,//指定指令的作用域 scope:'',// transclude:'',//string //function(scope,element,attrs,transclude,otherInjectables) { ... } controller:'',// controllerAs: '',// require: '',//以编程的方式操作DOM，包括添加监听器等 link: function postLink(scope,iElement,iAttrs) {},// compile: // 返回一个对象或连接函数，如下所示： function(tElement,tAttrs,transclude) { return { pre: function(scope,iAttrs,controller) { },post: function(scope,controller) { } } // 或者 return function postLink() { } }; }; })