Clear previous data before request

Question

I've got an HTML-template which loads data from controller's array and keeps them in a table. Also I have a directive, which makes transclusion for table rows. The data array is being filled on API-requests. After the new requests I've got the request results merged in my table. One set of rows is being added for each request instead of clearing previous results.

I've debugged over my controller code to check the state of my array and it's being cleared before each request. That's for sure. However new results are added to previous. I think the reason might be in my template of transclusion directive.

The template looks like:

<div class="row">
    <div class="col-md-12">
        <div id="results" ng-show="results.length > 0">
            <table class="table result-table">
                <thead>
                    <tr>
                        <th>1</th>
                        <th>2</th>
                        <th>3</th>
                        <th>4</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="result in results" my-result></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Here is the code of my transclusion directive:

angular.module('app').directive('myResult',
['$compile',
function ($compile) {
    return {
        transclude: true,
        templateUrl: '/Scripts/app/templates/resultTemplate.html',
        compile: function (tElement, tAttr, transclude) {
            var contents = tElement.contents().remove();
            var compiledContents;
            return function (scope, iElement, iAttr) {
                if (!compiledContents) {
                    compiledContents = $compile(contents, transclude);
                }
                compiledContents(scope, function (clone, scope) {
                    iElement.replaceWith(clone);
                });
            };
        }
    }
}]);

And finally the template used for transclusion:

<tr class="big-bord">
    <td colspan="4"><h3>{{result.fullName}}</h3></td>
</tr>
<tr ng-repeat="item in result.items">
    <td>{{item.value1}}</td>
    <td>{{item.value2}}</td>
    <td>{{item.value3}}</td>
    <td>{{item.value4}}</td>
</tr>

How can I clear my results before each API requests?

Answer 1

I solved my problem. It turned out that multiple <tbody> tags are allowed within one table. So I just moved my ng-repeat to <tbody> tag:

<tbody ng-repeat="result in results">
    <tr class="big-bord">
        <td colspan="4"><h3>{{result.fullName}}</h3></td>
    </tr>
    <tr ng-repeat="item in result.items">
        <td>{{item.value1}}</td>
        <td>{{item.value2}}</td>
        <td>{{item.value3}}</td>
        <td>{{item.value4}}</td>
    </tr>
</tbody>

So, I don't need any directives at all.