AngularJsの再帰的なコンポーネントテンプレート1.5+

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

私は、このモジュールにモジュール、登録されたコントローラとコンポーネントを作成しました。出力ディレクトリおよび使用にそれをコピーし、私はJSファイルにTSファイルをコンパイル一気の助けを借りて

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

：

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

とテーブルコンポーネント用：ここ 行コンポーネントの私のコードですバンドルのためにbrowserify、すなわち私はうまく動作する1つの出力ファイルを持っています。私がきた、トロウはすべての権利である（

問題は、そのコード

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

実際トロウとコントローラのフィールド「tableRowModel」を設定しないと私は理由を知りません見られたログ）。誰かが私になぜそれがうまくいかず、それをどう修正するかというアイデアを教えてもらえますか？

ありがとうございました！

Answer 1

バインディングは、HTML要素/属性が大文字と小文字を区別しないため、コンポーネント名文字列のようにケバブキーになりますので、<tree-table-row table-row-model="tRow">を実行してみてください。