Angular Directive table rows issue

Question

I am a beginner Angular programmer, but I am really close to understanding the directives.

I create a fiddle here, but I have never used fiddle before, and it is not quite rendering ...

the tr-row is a directive. I am trying to loop through the data, and print a directive (row) 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: "="
    }
};
});

should be easy. (le sigh)

any help would be appreciated, I REALLY need to understand this.

What is happening in my code is the tr-row directive has replace the table. I get a list of them, (with a tr INSIDE of a tr-row element but there is no table to display them in. I know this means I am close, but I cant think of any new combinations to try.

I just need a simple table with rows in it.

I appologise if this has been asked a million times, I seem to be unsure what to search for. I have tried so many things.

Solution 1

Firstly, a tag name can't contain dash char. So you can't use tr-row as tag name, but you can use it as attribute.

Then, you can simply write a directive like that:

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

And usage is like that:

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

A working example in fiddle: http://jsfiddle.net/T7k83/85/

Solution 2

Actually this problem is specific to <table> elements.

Browser parsing engines don't like invalid tags inside <table> so they will try to throw your directive out of the table (you can see that by inspecting the element), before your directive has a chance to replace itself with valid elements. This applies even if your directive doesn't contain dash in the name.

The way to solve this would be using directive type A instead of type E, which is suggested by @MuratCorlu.

For other elements such as <div>, you can pretty much replace it with custom tags with names containing dash. For example ng-repeat can be used as a tag.

Comments

[Tracy Lauren]

that is the easiest answer, and right to the point. works great. thank you so much!

[Murat Çorlu]

So, you can click tick on the left to set this as answer. Thanks, and welcome to stackoverflow :)

[jorrebor]

Dunno what changed but the fiddle example does not show any data in the table

[Admin]

@Murat Corlu, you can have tag names which contain dash characters please see this fiddle - jsfiddle.net/Heartless141/u00351mk/1

[Admin]

@Murat Corlu in the context of AngularJS docs.angularjs.org/guide/directive#directive-types