利用angularJS directive编写自定义指令accordion 案例

最新推荐文章于 2018-11-07 00:41:53 发布

程序媛~婷

最新推荐文章于 2018-11-07 00:41:53 发布

阅读量191

点赞数

分类专栏： JS Angular 文章标签： directive指令 accordion

本文链接：https://blog.csdn.net/litingyuki/article/details/83690996

版权

Angular 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" ng-app="expanderModule">
<head>
    <meta charset="UTF-8">
    <title>自定义指令 accordion</title>
    <link rel="stylesheet" href="CSS/bootstrap.css">

    <style>
        .accordion{
            border:solid 1px #E3E3E3;
            width: 200px;
            margin-top: 20px;
            margin-left: 20px;
        }
        .expander{
            width: 100%;

        }
        .title{
            background-color: #2f96b4;
        }
        .body{
            background-color: #ffffff;
            height:100px;
        }

    </style>
    <script src="angular.min.js"></script>
    <script>
        var expModule = angular.module('expanderModule',[]);
        //accordion通过Controller暴露一部分公共的方法
        expModule.directive('accordion',function(){
            return{
                restrict: 'EA',
                replace: true,
                transclude: true,
                template: '<div class="accordion" ng-transclude></div>',
                controller:function () {
                    var expanders = [];
                    this.gotOpened = function (selectedExpander) {
                        angular.forEach(expanders,function (expander) {
                            if(selectedExpander != expander){
                                expander.showMe = false;
                            }
                        })
                    }
                    this.addExpander = function (expander) {
                        expanders.push(expander);
                    }
                }
            }
        })
        expModule.directive('expander',function () {
            return{
                restrict: 'EA',
                replace : true,
                transclude: true,
                require:'^?accordion',  //依赖外部的accodion,在link 中就可以接受第四个参数accordionController
                scope : {
                    title:'=expanderTitle'
                },
                template : '<div><div class="title" ng-click="toggle()">{{title}}</div>' +
                '<div class="body" ng-show="showMe" ng-transclude></div>' +
                '</div>',
                link : function (scope,element,attrs,accordionController) {
                    scope.showMe  = false;
                    accordionController.addExpander(scope);
                    scope.toggle = function toggle() {
                        scope.showMe = !scope.showMe;
                        accordionController.gotOpened(scope);
                    }
                }
            }
        });
        expModule.controller('SomeController',function ($scope) {
            $scope.expanders = [{
                title:'Click me to expand',
                text : "hello,I am the content that was hidden but now is shown."
            },{
                title:"Click this",
                text:"I am even better text that you have seen previously"
            },{
                title:"Test",
                text:"test"
            }]
        })
    </script>
</head>
<body ng-controller="SomeController">
    <accordion >
        <expander class="expander" ng-repeat="expander in expanders" expander-title="expander.title">
            {{expander.text}}
        </expander>
    </accordion>

</body>
</html>

界面如下图所示：

程序媛~婷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用angularJS directive编写自定义指令accordion 案例

&lt;!DOCTYPE html&gt;&lt;html lang="en" ng-app="expanderModule"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;自定义指令 accordion&lt;/title&gt; &lt;lin
复制链接

扫一扫