아코디언 메뉴를 구현하기 위해 Bootstrap과 결합된 Angular.js code_AngularJS

제목은 실제로 부트스트랩 스타일을 활용한 아코디언 메뉴를 구현하기 위해angularjs와 bootstrap을 조합한 것에서 따온 것입니다.

이전 글에서는 테이블 페이징 코드 구현을 위해 Bootstrap과 결합된 Angular.js를 소개했습니다. 그런 다음 구현된 데모를 알아보세요.

주로 맞춤 지침을 연습하고 지침에 매개변수를 전달하는 것이 기존 규칙입니다.

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

위는 제가 사용자 정의한 지침입니다. 메뉴에는 ng-repeat를 사용하여 렌더링된 3가지 항목의 제목과 내용이 있습니다.

명령어의 기본 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>