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

我已经做了一些事情，我不知道这是否是最干净的方式，因为它有效：

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

在foreach循环中使用ng-click编译html字符串

1 个答案: