【问题标题】：ng-click doesn't work inside an <a> tagng-click 在 <a> 标记内不起作用
【发布时间】：2017-10-17 16:08:03
【问题描述】：

我正在使用jstree，我想为每个节点添加一组操作按钮，如下所示：

<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>

所以我所做的是在我创建的指令中，它包装了 jstree，我迭代节点并将这些操作按钮与节点的文本连接起来：

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

addActionButtons() 将简单地返回上面的操作按钮字符串。

所以在这种情况下，jstree 将在a 标签内添加操作按钮，如下所示：

<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>

我在这里面临的问题是，当我单击某个操作按钮时，它不会触发 ng-click。

我该如何解决这个问题？

更新：

当我尝试使用onclick="alert('test')" 时，它起作用了，所以问题只在于ng-click，我想我必须这样做：

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

但这会在我的节点前添加一个字符串[Object object]，而不是操作按钮。

【问题讨论】：

标签： javascript angularjs jstree

【解决方案1】：

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

【讨论】：

不幸的是我不能这样做，因为 a 是用 jstree 插件生成的，而且我不是在我的代码中创建它的人。
我找到了一个可以添加 javascript:void(0) 的解决方案，但它仍然不起作用
我认为这不是问题，因为 onclick 有效

【解决方案2】：

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

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

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

另外，请参考以下答案：

Compiling dynamic HTML strings from database

【讨论】：

我已经知道$compile 服务，但很遗憾在这种情况下它不起作用，请检查我的更新。
我假设您需要将节点作为value.map 的一部分返回，以便 jsTree 工作？当您将一个对象（从$compile 返回的内容）连接到一个字符串时，该字符串将被强制转换为[object Object]。
就个人而言，我建议寻找在框架内工作的现有的基于 Angular 的树指令，而不是使用非 Angular jQuery 插件。
这就是问题所在，我找不到任何像样的基于角度的树视图，如果你发现它们只是包装到 jstree jQuery 插件，所以我做了同样的事情，我创建了一个指令包装了 jstree jQuery 插件。