Wydanie wierszy tabeli kątowej

Question

Jestem początkującym programistą programistycznym, ale jestem bardzo bliski zrozumienia dyrektyw.

tworzę fiddle here, ale ja nigdy nie używane skrzypce przed, i to nie jest całkiem renderowania ...

TR-rząd jest dyrektywa. Próbuję przeglądać dane i drukować dyrektywę (wiersz) na rekord. 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: "=" 
    } 
}; 
}); 

powinno być łatwe. (le sigh)

każda pomoc byłaby doceniona, NAPRAWDĘ muszę to zrozumieć.

To, co dzieje się w moim kodzie, to tr-row dyrektywa zastąpiła tabelę. Dostaję ich listę, (z tr INSIDE elementu tr-row, ale nie ma tabeli, w której można je wyświetlić. Wiem, że oznacza to, że jestem blisko, ale nie mogę wymyślić żadnych nowych kombinacji do wypróbowania.

Muszę tylko prostą tabelę z wierszy w nim.

I appologise jeśli ten został poproszony milion razy, to wydają się być pewni co do wyszukania. próbowałem wielu rzeczy.

Answer 1

pierwsze , nazwa tagu nie może zawierać znaku kreski. Nie można więc użyć nazwy znacznika tr-row, ale można go użyć jako atrybutu:

Następnie można po prostu napisać dyrektywę tak:

.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>' 
    }; 
}); 

i użytkowania jest tak:

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

przykładem pracy w skrzypcach: http://jsfiddle.net/T7k83/85/

Answer 2

Faktycznie problem ten jest specyficzny dla <table> elementy.

Mechanizmy analizujące przeglądarkę nie podoba nieprawidłowe znaczniki wewnątrz <table>, więc będą próbować wyrzucić swoją dyrektywę z tabeli (można to zobaczyć, sprawdzając element), zanim dyrektywa ma szansę zastąpić się poprawnymi elementami . Dotyczy to również sytuacji, gdy twoja dyrektywa nie zawiera myślnika w nazwie.

Aby rozwiązać ten problem, należy użyć dyrektywy typu A zamiast typu E, co sugeruje @MuratCorlu.

W przypadku innych elementów, takich jak <div>, można prawie zastąpić go niestandardowymi znacznikami z nazwami zawierającymi myślnik. Na przykład ng-repeat może być użyty jako znacznik.