Javascript JIT编译AngularJS树指令并单击事件

我一直在寻找一个好的角度指令来处理我们的所有要求：

• 绑定到非常大的数据结构（约4MB的json）
• 显示每个节点的复选框
• 选择节点时提供事件

最后我一直在写我自己的一本。在Stackoverflow的帮助下，编写生成树的指令并不太困难，但是当它绑定到大型数据源时，速度非常慢，因为它编译并构建整个树。我想知道是否有人可以帮助我，使子树在展开时编译/呈现，而不是在开始时全部编译/呈现

我还一直在努力连接click事件，以便在选择节点时触发它

我制作了一把小提琴来演示这些问题。我将数据保持在较小的范围内，以便快速加载，但如果需要，我可以创建一个较大的数据集。这是指令的当前代码

app.directive('simpleTree', function() {
    var directive = {
        template: '<div style="margin-top: 5px;"><div class="col-xs-12 col-sm-7"><div class="input-group"><input type="text" class="form-control" placeholder="Filter" ng-model="searchFilter"><div class="input-group-btn"> <span class="btn btn-default"><span class="glyphicon glyphicon-filter" style="font-size:14px; height:20px"></span></span></div></div></div>' +
        '<div simple-tree-root class="col-sm-12" ng-model="tree" search-text="searchFilter" style="margin-top: 5px;"></div><div data-ng-show="tree.length == 0" class="col-sm-12">No items to display</div></div>',
        replace: true,
        transclude: true,
        scope: {
            'tree': '=ngModel',
            'clickEventHandler': '&nodeClick'
        },
        restrict: 'AE',
        link: function($scope, element, attrs) {
        }
    };
    return directive;
});

 app.directive('simpleTreeRoot', function() {
    var directive = {
        template: '<ul class="simple-tree"><div choice ng-repeat="choice in tree | filter:searchText"></div></ul>',
        replace: true,
        transclude: true,
        scope: {
            'tree': '=ngModel',
            'searchText': '=',
            'clickEventHandler': '&nodeClick'
        },
        restrict: 'AE'
    };
    return directive;
});


app.directive('choice', function($compile) {
    return {
        restrict: 'AE',
        transclude: true,
        template: '<li><span><i class="glyphicon" data-ng-class="choice.expanded ? \'glyphicon-minus\' : \'glyphicon-plus\'"  data-ng-show="choice.items.length > 0" ng-click="choice.expanded = !choice.expanded" ></i></span>' +
                    '<label data-ng-click="clickEventHandler(choice.text)" class="col-sm-12">{{choice.text}}</label></li>',
        link: function(scope, elm, attrs) {

            //Add children by $compiling and doing a new choice directive
            if (scope.choice.items && (scope.choice.items.length > 0)) {
                var childChoice = $compile('<div simple-tree-root ng-model="choice.items" data-ng-show="choice.expanded"></div>')(scope);
                elm.append(childChoice);
            }
        }
    };
});

app.directive（'simpleTree'，function（）{
var指令={
模板：“”+
“没有要显示的项目”，
替换：正确，
是的，
范围：{
“树”：“=ngModel”，
'clickEventHandler'：'&nodeClick'
},
限制：“AE”，
链接：函数（$scope，element，attrs）{
}
};
返回指令；
});
app.directive（'simpletreroot'，function（）{
var指令={
模板：“
”，
替换：正确，
是的，
范围：{
“树”：“=ngModel”，
“searchText”：“=”，
'clickEventHandler'：'&nodeClick'
},
限制：“AE”
};
返回指令；
});
app.directive（'choice'，function（$compile）{
返回{
限制：“AE”，
是的，
模板：“
”+
“{choice.text}
”，
链接：功能（范围、elm、属性）{
//通过$编译并执行新的choice指令添加子项
if（scope.choice.items&&（scope.choice.items.length>0））{
var childChoice=$compile（“”）（范围）；
elm.append（childChoice）；
}
}
};
});

如果有人知道一个现有的指令可以实现所有这些，我很乐意使用它，或者如果没有，并且人们对此感兴趣，我可以在这里与人们交谈，看看我们是否可以为每个人开放源代码以供使用/贡献。

只需添加一个观察者：

if (scope.choice.items && (scope.choice.items.length > 0)) {
  scope.$watch('choice.expanded', function(newValue) {
  if (newValue) {
    var childChoice = $compile('<div simple-tree-root ng

if（scope.choice.items&&（scope.choice.items.length>0））{
作用域$watch（'choice.expanded'，函数（newValue）{
如果（新值）{
var childChoice=$compile（'这对于JIT渲染非常有效，但我仍然不确定如何在选择树节点时获得click事件。这里的任何帮助都将非常有用appreciated@Mark您可以在监视程序中广播事件，并在控制器中对该事件作出反应，而不是传递事件处理程序。这是最简单的解决方案。如果您不想这样做，那么我会让
simpletreoot
拥有一个继承的作用域。一个独立的作用域没有多大意义，因为
simpleTree
无论如何都是独立的。这样，您就可以在
选项
指令中直接使用
clickEventHandler
。