欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Angular.js与Bootstrap相结合实现手风琴菜单代码_AngularJS

程序员文章站 2022-04-16 23:18:44
...
标题定的是angularjs与bootstrap相结合实现手风琴菜单,其实也就是用的bootstrap的样式。

在上篇文章给大家介绍了Angular.js与Bootstrap相结合实现表格分页代码。接着学习实现的Demo。

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

Angular.js与Bootstrap相结合实现手风琴菜单代码_AngularJS

{{item.text}}

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

指令基本API如下:

app.directive('myDirective',function(){
return {
//restrict: 默认为A(属性,默认值) 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,记录当前点击的,来隐藏其他的。

具体代码注释如下:

{{item.text}}
', '', '