Rekursive Komponentenvorlage in AngularJs 1.5+

Question

Kürzlich habe ich begonnen in angularJS einzutauchen. Ich las einige Themen zum komponentenbasierten Ansatz und entschied, dass ich etwas üben sollte. Ich möchte eine Komponente erstellen, die eine Art von geschichteten Struktur von Zeilen darstellt. Ich habe ein Modell für Tabellenzeile und zwei Steuerungen: für Tabellenzeile und für die gesamte Tabelle:

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>;     
} 

Ich habe erstellt Modul registriert Steuerungen und Komponenten in dieses Modul. Hier ist mein Code für die Zeile Komponente:

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

Und für die Tabellenkomponente:

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

Mit Hilfe schluck i ts-Dateien in js Dateien zusammenstellen, kopieren Sie sie in das Ausgabeverzeichnis und Verwendung browserifizieren für Bündelung, dh ich habe eine Ausgabedatei, die gut funktioniert.

Das Problem ist, dass Code

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

nicht wirklich Controller Feld "tableRowModel" mit TRow gesetzt, und ich weiß nicht, warum (TRow alles in Ordnung, ich habe Protokolle gesehen). Kann mir bitte jemand eine Idee geben, warum es nicht funktioniert und wie man es beheben kann.

Vielen Dank!

Answer 1

Die Bindungen erhalten Kebab-Cased wie die Komponentenname Strings wegen der HTML-Elemente/Attribute nicht Groß-und Kleinschreibung, so versuchen Sie <tree-table-row table-row-model="tRow">.