angularJS1笔记-(15)-自定义指令(accordion伸缩菜单原始实现)

index.html:

    
    



    
    

        

            
                
                    {{collapse.content}}
                
            
        
    

　　kittencupCollapse.html

    

        

            
                {{heading}}
            
        
    
    
    

        

        
    

　　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: '
',//此处为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属性的标签里面去
        }
    })

　　运行结果:

 

转载于:https://www.cnblogs.com/yk123/p/6887115.html