AngularJs 1.5+ 中的递归组件模板

Question

最近我开始研究 angularJS。我阅读了一些有关基于组件的方法的主题，并决定进行一些练习。我想创建一个代表某种行的分层结构的组件。我有一个 table 行和两个控制器的模型：table 行和整个 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>;                 
}

我已经创建了模块，并在该模块中注册了控制器和组件。这是我的行组件代码：

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

对于 table 组件：

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

在gulp的帮助下，我将ts文件编译成js文件，将其复制到输出目录并使用browserify进行捆绑，即我有一个输出文件可以正常工作。

问题是代码

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

实际上并没有用 tRow 设置控制器的字段 "tableRowModel"，我不知道为什么（tRow 没问题，我看过它的日志）。有人可以告诉我为什么它不起作用以及如何解决它。

谢谢！

Answer 1

由于 HTML elements/attributes 不区分大小写，因此绑定像组件名称字符串一样采用 kebab 大小写，因此请尝试 <tree-table-row table-row-model="tRow">.

AngularJs 1.5+ 中的递归组件模板

Recursive component template in AngularJs 1.5+

angularjs

angularjs-components