compile html string with ng-click inside foreach loop

Question

I have a tree structure that has tons of items, so it is working very slow. I am trying to rewrite it in javascript to obtain a bit more performance. But I am stuck at the 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;
  }
})();

how could this be solved?

can you put some more code. I'm trying to reproduce the error, and i have to make a lot of assumptions on what your code looks like. — Darin Cardin
– Darin Cardin, Commented Sep 21, 2016 at 13:34
@DarinCardin done, but it's nothing else than what I wrote the first time. Just a directive with that code inside. the relevant problem is that ng-click, what the technique is to make that work — bokkie
– bokkie, Commented Sep 21, 2016 at 13:49
You can try to rebind the replaced html to angular. Take a look at: stackoverflow.com/questions/27131078/… — Joao Polo
– Joao Polo, Commented Sep 21, 2016 at 13:53
hm, at first, you already is doing the rebind. You can compare the codes to have an idea of the problem. — Joao Polo
– Joao Polo, Commented Sep 21, 2016 at 13:55

bokkie · Accepted Answer · 2016-09-21 14:46:49Z

0

I have done something, I don't know if it is the cleanest way, atm it works:

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

edited Sep 21, 2016 at 14:46

answered Sep 21, 2016 at 14:41

bokkie

1,6004 gold badges21 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

compile html string with ng-click inside foreach loop

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related