1

angularJSでツリーグリッドを作りたいです。これを達成するためのディレクティブを作成しています。すべての行には、要素と階層が含まれています。ここまでで、ツリー ビューを持つテーブルを作成しました。しかし、子要素は相対的なスコープを取得していません。

新しい行を作成するときは、_newRow(item, level) を呼び出しています。行を作成して . この特定の行では、'item' がスコープになります。

完全なコードはhttp://jsfiddle.net/sravanrekandar/Kzw6q/2/で入手できます。

    (function(){
    'use strict';
    angular.module('$srv.directives').directive('bsTree', [
      '$parse',
      '$compile',
      '$timeout',
      function ($parse, $compile, $timeout) {
        var buildTemplate = function (items, ul) {

            var table = [
                    '<table class="table table-bordered">',
                        '<thead><tr><th>Item</th><th>Href</th><th>Level</th></t></thead>',
                    '</table>'
                ],
                level = 1,
                tbody = angular.element('<tbody></tbody'),
                rows;

                table = angular.element(table.join(''));
                rows = _prepareRows(items, level);
                tbody.append(rows)
                table.append(tbody);

            function _newRow(item, level) {            
                var tr = [
                    '<tr>',
                        '<td>',
                            '<span ng-click="toggleCollapse(item)" ng-class="{\'icon-plus-sign\': !item.isCollapsed}" class="tree-level-' + level + '">',
                            '</span>',
                            item.text,
                        '</td>',
                        '<td>' + item.href + '</td>',
                        '<td>' + level + '</td>',
                    '</tr>'
                    ].join('');

                tr = angular.element(tr);
                //$compile(tr)(item); // [[Error: TypeError: Object #<Object> has no method '$watch']]
                return tr;
            }

            function _prepareRows(items, level) {
                var rows = [],
                    i;
                angular.forEach(items, function (item, index) {
                    if(!item.isCollapsed) {
                        item.isCollapsed = true;
                    }
                    var row = _newRow(item, level);
                    rows.push(row);

                    if(item.items && item.items.length) {
                        row = _prepareRows(item.items, level+1);
                        if (angular.isArray(row)) {
                            for(i = 0; i < row.length; i++) {
                                rows.push(row[i]);
                            }
                        }
                    }
                });
                return rows;
            }
            return table;
        };
        return {
          restrict: 'EA',
          scope: true,
          link: function postLink(scope, iElement, iAttrs) {
            var getter = $parse(iAttrs.bsTree), items = getter(scope);
            $timeout(function () {
              if (!angular.isArray(items)) {
              }
              var table = buildTemplate(items);
              table.insertAfter(iElement);
              $compile(iElement.next('table.table'))(scope);
            });
          }
        };
      }
    ]);
})();
4

1 に答える 1

0

スコープはデフォルトで継承されます。「scope: true」を使用して、ディレクティブの新しいスコープを作成しています。ディレクティブから「scope: true」を削除してみてください。次に、コントローラーからスコープを継承する必要があります。

于 2013-09-02T23:50:26.770 に答える