1

I'm working with jstree, and foreach node I want to add a set of action buttons as following :

<span class="action-button-container">
    <md-button class="md-icon-button" aria-label="Nouveau" ng-click="createNode($event)">
        <md-icon class="material-icons">add_circle</md-icon>
    </md-button>
    <md-button class="md-icon-button" aria-label="Modifier" ng-click="renameNode($event)">
        <md-icon class="material-icons">edit</md-icon>
    </md-button>
    <md-button class="md-icon-button" aria-label="Supprimer" ng-click="removeNode($event)">
        <md-icon class="material-icons">delete_circle</md-icon>
    </md-button>
</span>

So what I did is in the directive I created, which wraps jstree, I iterate over nodes and concat these action buttons with the node's text :

value.map(function(node){
    node.text = node.text + addActionButtons();
    return node;
});

addActionButtons() will simply return the action buttons string in above.

So in this case jstree will add the action buttons inside an a tag, as following :

<a class="jstree-anchor" href="#" tabindex="-1" id="ajson1_anchor">
   <i class="jstree-icon jstree-themeicon" role="presentation"></i>Label 1
   <span class="action-button-container">
      <md-button class="md-icon-button" aria-label="Nouveau" ng-click="createNode($event)">
         <md-icon class="material-icons">add_circle</md-icon>
      </md-button>
      <md-button class="md-icon-button" aria-label="Modifier" ng-click="renameNode($event)">
         <md-icon class="material-icons">edit</md-icon>
      </md-button>
      <md-button class="md-icon-button" aria-label="Supprimer" ng-click="removeNode($event)">
         <md-icon class="material-icons">delete_circle</md-icon>
      </md-button>
   </span>
</a>

The problem I'm facing here is that when I click on some action button it doesn't trigger the ng-click.

How can I solve this ?

Update:

When I tried to use onclick="alert('test')" it worked, so the problem is only with the ng-click, I think I have to do something like this :

node.text = node.text + $compile(addActionButtons())(scope);

But this adds a string [Object object] in front of my nodes, and not the action buttons.

Community
  • 1
  • 1
Renaud is Not Bill Gates
  • 1,684
  • 34
  • 105
  • 191

2 Answers2

0

Try to change href="#" to href="javascript:void(0)"

Mahmoud
  • 868
  • 11
  • 27
0

I believe the issue you are suffering from is since AddActionButtons is generating a string dynamically, Angular does not recognize the directives as existing.

You will probably need to use the $compile service:

https://docs.angularjs.org/api/ng/service/$compile

Also, consult this answer:

Compiling dynamic HTML strings from database

P Ackerman
  • 2,266
  • 20
  • 24
  • I already know about the `$compile` service, but unfortunately it won't work in this case, please, check my update. – Renaud is Not Bill Gates Oct 17 '17 at 16:28
  • I'm assuming you need to return the node as part of `value.map` for jsTree to work? When you concatenate an object (what gets returned from `$compile`) to a string, the string gets coerced to `[object Object]`. – P Ackerman Oct 17 '17 at 16:39
  • Personally, I would recommend looking for an existing Angular-based tree directive that works within the framework rather than using a non-angular jQuery plugin. – P Ackerman Oct 17 '17 at 16:41
  • Well that's the problem, I couldn't find any decent angular based treeview, and if you found some they are just wraps to the jstree jQuery plugin, so I did the same and I created a directive that wraps the jstree jQuery plugin. – Renaud is Not Bill Gates Oct 18 '17 at 08:28