Javascript 将JQuery slideUp/slideDown转换为角度指令

我在JQuery中实现了slideUp/Down功能。现在我想创建一个角度指令来实现这一点。我的html代码是

<div class="panel-heading">
    <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-down"></i></span>
</div>
<div panel-body>
    <!-- Content to be slide up/down -->
</div>

如何将此功能转换为Angular指令，以便不需要在控制器中操作DOM？谢谢

例如：

$(document).on('click', '.panel-heading span.clickable', function(e){
    var $this = $(this);
    if ($this.find('i').hasClass("glyphicon-chevron-up")) {
        $this.parents('.panel').find('.panel-body').slideUp();
        $this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
    }
    else {
        $this.parents('.panel').find('.panel-body').slideDown();
        $this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
    }
});