2016-07-06 37 views
5

Ho un modello HTML che carica i dati dall'array del controller e li mantiene in una tabella. Inoltre ho una direttiva, che rende transclusione per le righe della tabella. L'array di dati viene riempito su richieste API. Dopo le nuove richieste ho ottenuto i risultati della richiesta uniti nella mia tabella. Un gruppo di righe viene aggiunto per ogni richiesta invece di cancellare i risultati precedenti.Cancella i dati precedenti prima della richiesta

Ho eseguito il debug sul mio codice controller per controllare lo stato della mia matrice e viene cancellato prima di ogni richiesta. Certamente. Tuttavia, i nuovi risultati vengono aggiunti al precedente. Penso che la ragione potrebbe essere nel mio modello di direttiva sulla transclusione.

Il modello si presenta come:

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

Ecco il codice della mia direttiva inclusione:

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

E, infine, il modello utilizzato per inclusione:

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

Come posso cancellare i risultati prima di ogni richiesta API?

+0

Quale versione di Angular stai usando? Secondo i documenti di Angular 1.4, la compilazione (transclude) è stata deprecata. – jbrown

+0

jbrown, io uso Angular 1.5.7. Cosa viene invece della transclusione? – Waldemar

+0

Lo stato dei documenti angolari "usa la funzione di transizione che viene passata invece alla funzione di collegamento". Leggi di più qui: https://docs.angularjs.org/api/ng/service/$compile – jbrown

risposta

4

Ho risolto il mio problema. Si è scoperto che più tag > tbody sono consentiti all'interno di una tabella. Così ho appena spostato la mia ng-repeat per <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> 

Così, non è necessario alcun direttive a tutti.

+1

Se vuoi evitare più 'tbody', tu può usare 'ng-repeat-start' sulla prima riga e' ng-repeat-end' sulla seconda riga. [Maggiori informazioni] (https://docs.angularjs.org/api/ng/directive/ngRepeat). –

Problemi correlati