Angular Directive Table Rows Issue

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 renderin

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.