Custom directive elements as table elements

[Fritz Gerneth]

Hi,

I'm trying to create some directives that extend HTML Table elements. The (simplified) markup is as follows:

<tree-grid>
    <thead> some content </thead>
    <tbody>
        <tree-row ng-repeat='row in rows' row='row'></tree-row>
    </tbody>
    <ng-transclude />
</tree-grid>

Where tree-grid & tree-row are my custom directives. The directives work fine by themselves (including recursion). The header is rendered fine (as it contains no further directives).

The rows are tree-rows are properly added to the DOM. However they are displayed atop of the table, indicating they are not considered valid table elements. I suspect this is due to they are of type HTMLElement instead of HTMLTableRowElement.

When specifying `replace: true` on the tree-row directive and adding <tr> elements to the template, almost everything works fine.

While there are some other issues (i.e. the DOM position of my elements is constantly moved), the most pressing question is: can I define my custom directive to be a HTMLTableRowElement instead of a plain HTMLElement (assuming this is causing the issues, no HTML expert)? Or am I using a completely wrong approach here?

The code for the tree-row directive is

    .directive('treeRow', ['$compile', function ($compile) {
        return function createDirective() {
            var treeController;
            return {
                restrict: 'E',
                require: '^treeGrid',
                scope: {
                    row: '='
                },
                templateUrl: 'components/treegrid/templates/row.html',
                link: function (scope, element, attrs, gridController) {
                    treeController = gridController;
                },
                controller: function ($scope) {
                    $scope.expanded = false;
                    $scope.getColumnDisplayOrder = function () {
                        return treeController.getColumnDisplayOrder();
                    };
                    $scope.toggleExpand = function () {
                        $scope.expanded = !$scope.expanded;
                    };
                    $scope.hasChildren = function() {
                        return angular.isArray($scope.row.children);
                    };
                }
            };
        }();
    }]);

I sure could use a attribute directives, but I like the idea of creating custom elements to represent my intention.

Thankful for any input,
Fritz

[Sander Elias]

Hi Fritz,

Your <tr> and <td> elements will be wrapped inside a <treeRow> element. the <tbody> element only accepts <tr> as it's children. (Nothing angular, just plain HTML)

There are 2 solutions, the simplest is indeed switch to attribute directives. 

the second way is to build your own compile function that takes out the originating HTML.

Don't use the replace property, that is deprecated!

Regards

Sander

[Fritz Gerneth | funct GmbH]

Hi,

 

Yes that’s what is happening. Thanks for confirming this.

 

No pro in custom HTML Elements here: if my <tree-row> element extends the HTMLTableRowElement (indicating it’s a <tr>), I suspect it might work (to be confirmed). For this (and other scenarios where I’d like to use a different HTMLElement type for my elements) I’d need to be able to set the prototype of the element.

 

Regards,

Fritz

 

 

 

Fritz Gerneth

gernet...@funct.com

 

 

funct GmbH  Amalienstr. 39 D-80799 Munich	T:   +49-89 21 909 16 0 F:   +49-89 21 909 16 00 www.funct.com
Managing director:	Sascha Schwartz
Company register:	Amtsgericht München HRB 203304

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/LtCrn5-RoOk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Sander Elias]

Hi Fritz,

You are right, I suspect if you use polymer/x-tags to create a custom <tr> tag it will work indeed.

Regards

Sander

[Fritz Gerneth | funct GmbH]

Hi,

 

Thanks for the input. Will try this out later on.

 

Thanks,

Fritz