这篇文章主要介绍了Angular.js与Bootstrap相结合实现手风琴菜单来源gaodai$ma#com搞$$代**码网的相关资料,需要的朋友可以参考下
标题定的是angularjs与bootstrap相结合实现手风琴菜单，其实也就是用的bootstrap的样式。
在上篇文章给大家介绍了Angular.js与Bootstrap相结合实现表格分页代码。接着学习实现的Demo。
主要练习自定义指令，向指令中传递参数，老规矩先上效果图：
{{item.text}}
上面是我自定义的指令，菜单存在标题和内容3条用了 ng-repeat来渲染。
指令基本API如下：
app.directive('myDirective',function(){ return { //restrict: 默认为A（属性，默认值）<div></div> 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, iElement, iAttrs, controller) { }, post: function(scope, iElement, iAttrs, controller) { } } // 或者 return function postLink() { } }; }; })
如何切换的时候让其他的隐藏呢，这里主要用到指令ng-show，记录当前点击的，来隐藏其他的。
具体代码注释如下：
.con { margin: 0 auto; width: 600px; margin-top: 100px; } .panel { width: 580px; } .panel-heading { cursor: pointer; } <div class="con"> {{item.text}}</div>
以上就是Angular.js与Bootstrap相结合实现手风琴菜单代码的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Angular.js与Bootstrap相结合实现手风琴菜单代码
转载请注明原文链接：Angular.js与Bootstrap相结合实现手风琴菜单代码
