Question

最近我开始潜入angularJS。我阅读了一些关于基于组件的方法的主题，并决定了一些实践。我想创建一个代表某种行的分层结构的组件。我有一个表行和两个控制器的模型：用于表行和整个表：

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

对于表组件：

    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">

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

谢谢！

Answer 1

由于HTML元素/属性不区分大小写，因此绑定会像组件名称字符串一样使用kebab，因此请尝试<tree-table-row table-row-model="tRow">。

AngularJs 1.5+中的递归组件模板

1 个答案: