angularJS1笔记-(15)-自定义指令(accordion伸缩菜单原始实现)
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../vendor/bootstrap3/css/bootstrap.min.css"/>
</head>
<body>
<div ng-app="myApp">
<!--container为居中的div-->
<div class="container">
<div ng-controller="firstController">
<kittencup-group>
<kittencup-collapse ng-repeat="collapse in data" heading="{{collapse.title}}">
{{collapse.content}}
</kittencup-collapse>
</kittencup-group>
</div>
</div>
</div>
<script type="text/javascript" src="../../vendor/angular/angularJs.js"></script>
<script type="text/javascript" src="app/index.js"></script>
<script>
</script>
</body>
</html>
kittencupCollapse.html
<div class="panel panel-default">
<div class="panel-heading" ng-click="changeStatus()">
<h4 class="panel-title">
<a href="#">
{{heading}}
</a>
</h4>
</div>
<!--collapse为true 才会隐藏子内容-->
<div class="panel-collapse" ng-class="{collapse:!isOpen}">
<div class="panel-body" ng-transclude>
</div>
</div>
</div>
index.js:
var myApp = angular.module('myApp', [])
//数据
.factory('myData', function () {
return [
{title: "no1", content: "no1-content1"},
{title: "no2", content: "no2-content2"},
{title: "no3", content: "no3-content3"}
];
})
//控制器
.controller('firstController', ['$scope', 'myData', function ($scope, myData) {//把myData注入进来
$scope.data = myData;
}])
.directive('kittencupGroup', function () {
return {
restrict: 'E',
replace: true,
template: '<div class="panel-group" ng-transclude></div>',//此处为kittencup-group标签里面的内容占位成一个panel-group
transclude: true,
controllerAs: 'kittencuupGroupController',
controller: function () {
this.groups = [];
//关闭其他的
this.closeOtehrCollapse = function (nowScope) {
angular.forEach(this.groups, function (scope) {
if (scope != nowScope) {
scope.isOpen = false;
}
})
}
}
}
})
.directive('kittencupCollapse', function () {
return {
restrict: 'E',
replace: true,
require: '^kittencupGroup',
templateUrl: 'temp/kittencupCollapse.html',
scope: {
heading: "@"
},
//link可以把其他的controller依赖注入进来
link: function (scope, element, attrs, kittencuupGroupController) {
scope.isOpen = false;
scope.changeStatus = function () {
scope.isOpen = !scope.isOpen;
kittencuupGroupController.closeOtehrCollapse(scope);
}
kittencuupGroupController.groups.push(scope);
},
transclude: true //将模板的内容放在指定的ng-transclude属性的标签里面去
}
})
运行结果:
