Numero di righe tabella direttiva angolare

Question

Sono un programmatore angolare per principianti, ma sono molto vicino alla comprensione delle direttive.

creo un fiddle here, ma non ho mai usato il violino prima, e non è del tutto il rendering ...

il TR-fila è una direttiva. Sto cercando di scorrere i dati e stampare una direttiva (riga) per record. HTML:

<table ng-controller="fiddleCtrl"> 
    <thead> 
     <th>id</th> 
     <th>name</th> 
     <th>description</th> 
    </thead> 
    <tbody> 
    <tr><tr-row ng-repeat="d in data" scdata="d"></tr-row></tr> 
    </tbody> 
</table> 

javascript:

var myapp = angular.module('myApp', []) 
.controller('fiddleCtrl', ['$scope', function ($scope) { 

$scope.data = [ 
    { id: 1, name: 'Fred', description: 'not the best worker' }, 
    { id: 2, name: 'Wilma', description: 'Freds Wife'}, 
    { id: 3, name: 'Barney', description: 'Freds best friend'}, 
    { id: 4, name: 'Louise', description: 'Never heard of Fred'}, 
    { id: 5, name: 'Tracy', description: 'Some Chick'}, 
    { id: 6, name: 'Foo', description: 'Inventer of bar'} 
]; 
}]).directive('trRow', function ($compile) { 
return { 
    restrict: "E", 
    replace: true, 
    link: function (scope, element, attrs) { 
     scope.id = scope.d.id; 
     scope.name = scope.d.name; 
     scope.desc = scope.d.description; 

     var tmpl = '<tr ><td>{{id}}</td><td><strong>{{name}}</strong></td><td>{{desc}}</td></tr>'; 
     element.html(tmpl).show(); 
     //var e =$compile(tmpl)(scope); 
     //element.replaceWith(e); 
     var e = $compile(element.contents())(scope); 
    }, 
    scope: { 
     d: "=" 
    } 
}; 
}); 

dovrebbe essere facile. (le sospiro)

qualsiasi aiuto sarebbe apprezzato, ho VERAMENTE bisogno di capire questo.

Cosa sta succedendo nel mio codice è che la direttiva tr-row ha sostituito la tabella. Riceverò un elenco di loro, (con un tr INSIDE di un elemento tr-row ma non c'è nessuna tabella per visualizzarli. So che questo significa che sono vicino, ma non posso pensare a nessuna nuova combinazione da provare.

ho solo bisogno di una semplice tabella con righe in esso.

ho appologise se questo è stato chiesto un milione di volte, mi sembra di essere sicuri di cosa cercare. ho provato tante cose.

Answer 1

in primo luogo , il nome del tag non può contenere trattino caratteri. Quindi non è possibile utilizzare tr-row come nome tag, ma è possibile utilizzarlo come attributo

Quindi, si può semplicemente scrivere una direttiva del genere:

.directive('trRow', function() { 

    return { 
     template: '<tr><td ng-bind="row.id"></td><td><strong ng-bind="row.name"></strong></td><td ng-bind="row.description"></td></tr>' 
    }; 
}); 

e il loro utilizzo è così:

<tbody> 
    <tr tr-row ng-repeat="row in data"></tr> 
</tbody> 

Un esempio di lavoro in violino: http://jsfiddle.net/T7k83/85/

Answer 2

In realtà questo problema è specifico per <table> elementi.

I motori di analisi del browser non amano i tag non validi all'interno di <table> in modo che proveranno a gettare la direttiva fuori dalla tabella (lo si può vedere ispezionando l'elemento), prima che la direttiva abbia la possibilità di sostituirsi con elementi validi . Questo si applica anche se la tua direttiva non contiene trattino nel nome.

Il modo per risolvere questo problema sarebbe utilizzare il tipo di direttiva A anziché il tipo E, suggerito da @MuratCorlu.

Per altri elementi come <div>, è possibile sostituirlo con tag personalizzati con nomi contenenti trattini. Ad esempio, ng-repeat può essere utilizzato come tag.