Wyczyść poprzednie dane przed wysłaniem żądania.

Question

Mam szablon HTML, który ładuje dane z tablicy kontrolera i przechowuje je w tabeli. Mam również dyrektywę, która dokonuje transclusion dla wierszy tabeli. Tablica danych jest wypełniana na żądanie interfejsu API. Po nowych wnioskach otrzymałem wyniki zapytania scalone w mojej tabeli. Do każdego żądania dodawany jest jeden zestaw wierszy zamiast usuwania poprzednich wyników.

Mam debugowany nad moim kodem kontrolera, aby sprawdzić stan mojej tablicy i jest wyczyszczone przed każdym żądaniem. Na pewno. Jednak nowe wyniki są dodawane do poprzednich. Myślę, że powód może być w moim szablonie dyrektywy transclusion.

Szablon wygląda następująco:

<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> 

Oto kod mojego dyrektywy dołączony szablon:

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); 
       }); 
      }; 
     } 
    } 
}]); 

I wreszcie szablon używany do transkluzji:

<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> 

Jak mogę wyczyścić moje wyniki przed każdym żądaniem interfejsu API?

Answer 1

Rozwiązałem mój problem. Okazało się, że wiele znaczników < jest dozwolonych w ramach jednej tabeli. Więc po prostu przeniósł mój NG-repeat do <TBODY> tagu:

<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> 

tak, że nie potrzeba żadnych dyrektyw w ogóle.