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

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

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

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

<my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page> 

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

指令基本api如下：

app.directive('mydirective',function(){
return {
//restrict: 默认为a（属性，默认值）<div my-directive=''></div> e（元素）c（类名）m（注释）
//这里考虑到浏览器的兼容性通常我们用所有浏览器都认识的a类型
restrict: 'a',
//优先级设置,默认是0,较大的优先调用
priority: 0,
//这个参数用来告诉angularjs停止运行当前元素上比本指令优先级低的指令。但同当前指令优先级相同的指令还是会被执行。
terminal: false,
//字符串或函数: 字符串<a></a>(指令内容)
//注：必须存在一个根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，记录当前点击的，来隐藏其他的。

具体代码注释如下：

<style type="text/css">
.con {
margin: 0 auto;
width: 600px;
margin-top: 100px;
}
.panel {
width: 580px;
}
.panel-heading {
cursor: pointer;
}
</style>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css" />
<div class="con" ng-app="myapp" ng-controller="myctrl">
<my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"></script>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.directive('mypage', function () {
return {
restrict: 'ea',
replace: true,
transclude: true, //是否将元素内容转移到模版中
scope: {
title: "=pagetitle"
},
template: [
'<div class="panel panel-info">',
'<div class="panel-heading" ng-click="toggle();">',
'<h3 class="panel-title" >{{title}}</h3>',
'</div>',
'<div class="panel-body" ng-show="showme" ng-transclude></div>',
'</div>'
].join(""),
link: function (scope, element, attrs) {
scope.showme = false;
scope.$parent.addexpander(scope); //保存所有菜单
scope.toggle = function toggle() {
scope.showme = !scope.showme; //隐藏显示
scope.$parent.gotoexpander(scope);
}
}
};
})
app.controller('myctrl', function ($scope) {
$scope.expanders = [{
title: 'angularjs',

text: 'angularjs 诞生于2009年，由misko hevery 等人创建，后为google所收购。是一款优秀的前端js框架，已经被用于google的多款产品当中。angularjs有着诸多特性，最为核心的是：mvvm、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。'


}, {
title: 'jquery',
text: 'jquery是继prototype之后又一个优秀的javascript库。它是轻量级的js库 ，它兼容css3，还兼容各种浏览器（ie 6.0+, ff 1.5+, safari 2.0+, opera 9.0+），jquery2.0及后续版本将不再支持ie6/7/8浏览器。jquery使用户能更方便地处理html（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供ajax交互。jquery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jquery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。'
}, {
title: 'bootstrap',
text: 'bootstrap，来自 twitter，是目前很受欢迎的前端框架。bootstrap 是基于 html、css、javascript 的，它简洁灵活，使得 web 开发更加快捷。 它由twitter的设计师mark otto和jacob thornton合作开发，是一个css/html框架。bootstrap提供了优雅的html和css规范，它即是由动态css语言less写成。bootstrap一经推出后颇受欢迎，一直是github上的热门开源项目，包括nasa的msnbc（微软全国广播公司）的breaking news都使用了该项目。 国内一些移动开发者较为熟悉的框架，如wex5前端开源框架等，也是基于bootstrap源码进行性能优化而来。'
}];
var expanders = []; //记录所有菜单
$scope.addexpander = function (expander) {
expanders.push(expander);
};
$scope.gotoexpander = function (selectedexpander) {
expanders.foreach(function (item, index) {
if (item != selectedexpander) { //隐藏非当前选项卡
item.showme = false;
}
})
}
});
</script>