transcluded指令不在角度js中工作

Question

我使用transclude：true在angular js中创建了一个指令，并将replace：true替换为

.directive('customElement', [function(){            
        return {
            restrict: 'E',
            template: '<table class="table table-striped table-bordered table-hover dataListing"><tbody ng-transclude></tbody></table></div>',
            replace: true,
            scope: {
                tableCaption : "@",
                colsName : "=",
                tableData : "="
            },                
            transclude: true,
            link: function(scope, elem, attrs) {
                console.log(scope.colsName);
            }
        };
        }]);

并在html中我称之为

<custom-Element table-Caption="Port Listing" cols-Name="tableColumns" table-Data="portList.emulationDetails">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
    </tr>
</custom-Element>

但是当我运行此代码时，已转换的数据（表格行）将转换为范围并放入指令中，如下图所示