Update:

Question

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.

Answer 1

尝试将href="#"更改为href="javascript:void(0)"

Answer 2

我相信您遇到的问题是因为AddActionButtons动态生成字符串，Angular不会将指令识别为现有。

您可能需要使用$ compile服务：

https://docs.angularjs.org/api/ng/service/ $编译

另外，请参考以下答案：

Compiling dynamic HTML strings from database

ng-click在<a> tag

Update:

2 个答案: