Recursive component template in AngularJs 1.5+

Question

Recently I've started diving into angularJS. I read some topics about component-based approach and decided the get some practice. I want to create a component which represents some kind of layered structure of rows. I have a model for table row and two controllers: for table row and for entire table:

export class TreeTableRowModel {
    uniqueKey: string;
    loaded: boolean;
    showChildren: boolean;
    treeLevel: number;  
    cells: any[]; // order corresponds to columns order
    children: TreeTableRowModel[]; 
}

export class TreeTableRowController {
    public tableRowModel: TreeTableRowModel;  

    public constructor() {
        console.log("constructor called");
        console.log(JSON.stringify(arguments.length));
    }   
}   

export class TreeTableController {
    public maxTableInheritanceLevel: number;
    public rows: Array<TreeTableRowModel>;                 
}

I've created module, registered controllers and components into this module. Here is my code for the row component:

    import * as angular from "angular";
import { TreeTableRowController } from "./TreeTableRowController.component";

var module = angular.module('treeTable', []);
module.controller('treeTableRowController', TreeTableRowController);
module.component('treeTableRow', {
    bindings: {
        tableRowModel: '<'
    },
    controller: 'treeTableRowController',
    controllerAs: 'row',
    template:   ['<div><span>test row: {{row}}</span></div>',
                '<div><span>test row.tableRowModel: {{row.tableRowModel}}</span></div>',

                '<div class="tree-table-row" ng-repeat="cellData in row.tableRowModel.cells">',  
                    '<span>inside cells ng-repeat test</span>',     
                    '<div class="tree-table-cell">',
                         '<i ng-if="$first" ng-class="row.tree_icon" ng-click="row.showChildren = !row.showChildren" class="indented tree-icon icon-plus fa fa-plus"></i>',
                         '<span>{{cellData}}</span>',
                     '</div>',
                '<div>'].join('')
                //'<treeTableRow ng-if="row.showChildren " ng-repeat="childRows in row.children"></treeTableRow>>' ].join('')    
});

And for the table component:

    import * as angular from "angular";
import { TreeTableController } from "./TreeTableController";
import "../TreeTableRow/tree-table-row.component"

var module = angular.module('treeTable');
module.controller('treeTableController', TreeTableController );
module.component('treeTable', {
    bindings: {
        rows: '<',
        maxTableInheritanceLevel: '@'
    },
    controller: 'treeTableController',
    controllerAs: 'table',
    template:   ['<div class="tree-table">',
                    '<div class="tree-table-head">',
                        '<div class="tree-table-cell"></div>',
                        '<div class="tree-table-cell"></div>',
                        '<div class="tree-table-cell"></div>',
                        '<div class="tree-table-cell"></div>',
                        '<div class="tree-table-cell"></div>',                        
                        '<div class="tree-table-cell"></div>',        
                    '</div>',
                    '<div class="tree-table-body">', 
                        '<div ng-repeat="tRow in table.rows">',
                            '<span>tRow: {{tRow}}</span>',
                            '<tree-table-row tableRowModel="tRow"></tree-table-row>',
                        '</div>',
                        '<div class="tree-table-cell">',
                            '<span>TEST TEST TEST</span>',
                        '</div>',
                    '</div>',
                '</div>'].join('')    
});

With the help of gulp i compile ts files into js files, copy it into output directory and use browserify for bundling, i.e. i have one output file which works fine.

The problem is that code

<tree-table-row tableRowModel="tRow">

doesn't actually set controller's field "tableRowModel" with tRow and i don't know why (tRow is all right, i've seen logs with it). Can someone please give me an idea why it doesn't work and how to fix it.

Thank you!

Answer 1

The bindings get kebab-cased like the component name strings because of HTML elements/attributes not being case-sensitive, so try doing <tree-table-row table-row-model="tRow">.