foreachループ内でng-clickでhtml文字列をコンパイルします

Question

私は数多くの項目を持つツリー構造を持っていますので、非常に遅いです。私はもう少しパフォーマンスを得るためにJavaScriptで書き直そうとしています。しかし、私はng-clickで立ち往生しています：

HTML：

<jstree initialstructure="vm.initialStructure" get-child-nodes="vm.getChildNodes()"></jstree> 

JS：

(function() { 
angular 
    .module('app.jstree') 
    .directive('jstree', Jstree); 

Jstree.$inject = ['$compile']; 

function Jstree($compile) { 
    var directive = { 
     restrict: 'E', 
     controller: 'JstreeController', 
     controllerAs: 'jst', 
     replace: true, 
     scope: { 
      initialstructure: '=', 
      getChildNodes: '&' 
     }, 
     link: function (scope, element, attrs) { 
       scope.$watch('initialstructure', function (items) { 
        if (items) { 
         var html = ""; 
         angular.forEach(items, function (item) { 
          html = html.concat('<li ui-tree-node>' + item.title); 
          var selectedNodeCls = item.selected ? 'selected-node' : ''; 
          html = html.concat('<div ui-tree-handle ng-click="alert(item);" class="' + selectedNodeCls + '" tooltip="' + item.title + '">'); 
          html = html.concat('</div>'); 
          html = html.concat('</li>'); 
         }); 
         element.html(html); 
         element = $compile(element)(scope); 
        } 
        scope.alert = function(item) { 
         console.log(item); //this is undefined, obviously because it is not on the scope 
        } 
       }); 
      } 
    }; 
    return directive; 
    } 
})(); 

をどのようにこれが解決されるだろうか？私は何かを行っている

Answer 1

それはクリーンな方法であれば、私はそれが動作ATM、知らない：

angular.forEach(items, function (item) { 
     ............ 
     html = html.concat('<div ui-tree-handle ng-click="alert(initialstructure[' + index + ']);" class="' + selectedNodeCls + '" tooltip="' + item.title + '">'); 
     ..........