单击后，从另一个指令动态地向DOM添加指令

Question

以下代码就是我所拥有的，但是一直发生的事情是在点击该行时，整个表行已从DOM中完全删除。

HTML

<tbody>
    <tr ng-repeat="tcround in tcyear.rounds" cw-fr-list-item="tcround">
        <td>{{tcround.name}}</td>
    </tr>
</tbody>

角度模块

.directive('cwFrListItem', [$compile', function($compile) {

    function link(scope, element, attrs) {

        element.on('click', function() {
            element.removeAttr('cw-fr-list-item');
            element.attr('cw-fr-list-item-expand', '');
            $compile(element)(scope);
        });
    }

    return {
        restrict: 'A',
        scope: {
            round: '=cwFrListItem'
        },
        link: link
    };
}])

.directive('cwFrListItemExpand', [function() {

    function link(scope, element, attrs) {
        console.log('cwFrListItemX:', scope);
    }

    return {
        restrict: 'A',
        templateUrl: '/dist/tcfr-expand.html',
        link: link
    };
}]);

我想要实现的目标

基本上，它非常简单，当用户点击表格中的一行时，我希望有关该特定行项目的详细信息显示在其下方的新行中作为表格。我希望动态创建并加载数据的“详细信息部分”。

什么错误

当我点击该行时，整个元素从DOM中消失。

有人可以提供帮助吗，因为这看起来很容易实现，但我很难搞清楚我做错了什么。