AngularJS - accordion - 直接在指令文件中指定ng-click和ng-if到element指令

Question

我正在使用自定义指令在Angular中创建一个手风琴。我创建了<ag-accordion>指令。该子项为ag-accordion-header指令作为属性。在html中它看起来像这样：

<ag-accordion>
    <div ag-accordion-header>Header 1</div>
    <div>Body 1</div>
    <div ag-accordion-header>Header 2</div>
    <div>Body 2</div>
    <div ag-accordion-header>Header 3</div>
    <div>Body 3</div>
</ag-accordion>

我的ag-accordion.directive.js看起来像这样：

(function() {

    'use strict';

    angular
        .module('app.widgets')
        .directive('agAccordion', agAccordion)
        .directive('agAccordionHeader', agAccordionHeader);

    function agAccordion () {

        return {
            restrict: 'E',
            scope: {},
            controller: controller
        };

        function controller() {

            var vm = this;

            vm.headers = [];

            vm.addHeader = function(header) {
                header.addClass('ag-accordion__header');
                header.next().addClass('ag-accordion__body hidden');
                vm.headers.push(header);
            };

            vm.hidePanels = function() {
                angular.forEach(vm.headers, function (header) {
                    header.next().addClass('hidden');
                });
            };

        }

    }


    function agAccordionHeader() {

        return {
            restrict: 'A',
            scope: {},
            require: '^agAccordion',
            link: link
        };

        function link(scope, element, attrs, ctrl) {

            ctrl.addHeader(element);

            element.on('click', function () {
                ctrl.hidePanels();
                element.next().removeClass('hidden');
            });

        }

    }

})();

一切正常，但我使用常见的jQuery“on click”事件来触发事件（而非ng-click）和'隐藏'类来显示和隐藏面板（而不是ng-if）。我想重新构建我的directive.js文件，使用ng-click和ng-if， HTML中没有变化。所以我想使用javascript为所有div分配角度ng-click和ng-if。我该怎么办？

感谢您的帮助：）

//编辑：

当然，我想在html代码中添加'ng'指令，但是使用JS中的函数而不是手动将ng-click和ng-if归因于每个单独的div。