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属性的标签里面去

        }

    })

　　运行结果:

angularJS1笔记-(15)-自定义指令(accordion伸缩菜单原始实现)的更多相关文章

  1. angularJS1笔记-(11)-自定义指令(transclude/priority/terminal)

    自定义指令的属性 transclude:为true时,允许把html中新定义的指令中原来的dom运用到该指令的template中. 属性priority,设置该指令的优先级,优先级大的先执行,默认指令 ...

  2. angularJS1笔记-(10)-自定义指令(templateUrl属性)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  3. angularJS1笔记-(9)-自定义指令(restrict/template/replace)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  4. angularJS1笔记-(14)-自定义指令(scope)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  5. angularJS1笔记-(13)-自定义指令(controller和controllerAs实现通信)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  6. angularJS1笔记-(12)-自定义指令(compile/link)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  7. Vue笔记--通过自定义指令实现按钮操作权限

    经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...

  8. AngularJs学习笔记3——自定义指令

    指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...

  9. AngularJS学习笔记(四) 自定义指令

    指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...

随机推荐

  1. flex拖动图片

    <?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="htt ...

  2. 查内存命令之free

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL杂记页     回到顶级页面:PostgreSQL索引页 [作者 高健@博客园  luckyjackgao@gmail. ...

  3. [BZOJ4883][Lydsy1705月赛]棋盘上的守卫[最小基环树森林]

    题意 有一大小为 \(n*m\) 的棋盘,要在一些位置放置一些守卫,每个守卫只能保护当前行列之一,同时在每个格子放置守卫有一个代价 \(w\) ,问要使得所有格子都能够被保护,需要最少多少的代价. \ ...

  4. python爬虫之Scrapy框架(CrawlSpider)

    提问:如果想要通过爬虫程序去爬取”糗百“全站数据新闻数据的话,有几种实现方法? 方法一:基于Scrapy框架中的Spider的递归爬去进行实现的(Request模块回调) 方法二:基于CrawlSpi ...

  5. Python 从零搭建 Conf_Web 配置管理平台

    作者:Eagle 某船舶行业科技公司,运维工程师,51Reboot学员.通过在51Reboot学习,由运维工程师转至运维开发工程师.完成公司自动化平台的构建,对运维开发有了自己的理解,空闲时间写了这么 ...

  6. 怎么使用Spring配置事务 ?

    Spring同时支持编程式事务策略和声明式事务策略,大部分时候都采用声明式事务策略. 声明式事务管理的配置方式,通常有以下4种: (1) 使用TransactionProxyFactoryBean为目 ...

  7. Unity优化方向——优化Unity游戏中的图形渲染（译）

    CPU bound:CPU性能边界,是指CPU计算时一直处于占用率很高的情况. GPU bound:GPU性能边界,同样的是指GPU计算时一直处于占用率很高的情况. 原文:https://unity3 ...

  8. 快手hr面

    快手hr面 20180918 自我介绍 hr部门介绍 效率工程 主要问题 问我对部门是否有感兴趣? 我要求地点在北京,然后就畅聊口音.老家,学校等 学校的成绩?(研究生.本科) 自己属于哪类学生?(属 ...

  9. gitlab+jenkins持续集成(三)

    构建: 需要将jenkins服务器上  jenkins用户的公钥发送给  目标服务器的gs用户,使得在jenkins上能用gs免密登录目标服务器 复制密钥到目标机器上(需要登录到的机器) ssh-co ...

  10. 如何防范和应对Redis勒索，腾讯云教你出招

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯云数据库 TencentDB发表于云+社区专栏 9月10日下午,又一起规模化利用Redis未授权访问漏洞攻击数据库的事件发生,此次 ...