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
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
