As a novice Angular programmer, I am on the cusp of grasping directives.
I decided to create a fiddle here, even though I am unfamiliar with it, and unfortunately, it's not rendering properly...
The tr-row is a directive that aims to loop through the data and generate a row for each 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: "="
}
};
});
This should be straightforward. (sigh)
Any assistance would be greatly appreciated as I am eager to comprehend this.
The issue with my code is that the tr-row directive is replacing the entire table. It generates a list of rows but without a table to contain them. I understand I am on the right track, but I'm running out of ideas to try.
All I need is a basic table with rows.
I apologize if this question has been asked numerous times before, I'm unsure of what keywords to search for. I've attempted various solutions without success.