从 Angular Treeview 指令调用 Bootstrap Modal 时没有任何反应

Question

我正在使用 Angular Treeview 在我的网站中构建层次结构。我为层次结构中的每个节点添加了一个 Bootstrap 下拉列表，当用户单击节点标签时会显示它。下拉菜单中显示的菜单项因节点类型而异。所有这一切我已经开始工作了。

现在，当用户想要添加节点时，应该打开一个 bootstrap 模式供用户输入。这就是我被卡住的地方，模态根本没有被调用。我在使用 $(".dropdown > ul.dropdown-menu").html($compile(appendThis)(scope)); 的指令中获得了功能，但是如果我想打开在指令模板中定义的模型，它就不起作用。

我已经尝试了解决方案 here and here，但它们不起作用。

这是指令模板的简化版本：

template =
'<div class="modal hide fade" id="addThisNode"">'+
    '<div class="modal-body">'+
            '<p>This Node Body</p>'+
    '</div>'+
'</div>'+

'<div class="modal hide fade" id="addOtherNode"">'+
    '<div class="modal-body">'+
            '<p>Other Node Body</p>'+
    '</div>'+
'</div>'+
'<ul>' +
       '<li data-ng-repeat="node in ' + treeModel + '">' +
           '<i class="normal" '+
                   'data-ng-hide="node.' + nodeChildren + '.length">'+
       '</i> ' +
        // Call this funcion when
        // the node label is clicked
        '<span class="treenode {{node.' + nodeType + '}}" '+
              'id="{{node.' + nodeId + '}}"'+
              'data-ng-class="node.selected" '+
              'data-ng-click="' + treeId +
              '.selectNodeLabel(node)">'+
              '{{node.' + nodeLabel + '}}'+
        '</span>' +

        // bootstap dropdown menu
        '<div class="dropdown" data-ng-show="node.selected">'+
              '<a data-toggle="dropdown"><span class="caret"></span></a>'+
              '<ul class="dropdown-menu">'+
                    // list items get appended here
              '</ul>'+
        '</div>'+
    '</li>' +
'</ul>';

如果用户单击节点标签，则调用此函数：

scope[treeId].selectNodeLabel = scope[treeId].selectNodeLabel || function( selectedNode ) {
    // set currentNode
    scope[treeId].currentNode = selectedNode;
    // Get the node type
    var nodetype = scope[treeId].currentNode.NodeType;

   var appendThis = '';
   if (nodetype == 'This'){
       appendThis = '<li><a data-target="#addThisNode" href="" data-toggle="modal">Add This Node</a></li>';
   }
   else if (nodetype == 'Other'){
       appendThis = '<li><a data-target="#addOtherNode" href="" data-toggle="modal">Add Other Node</a></li>';
   }

   $(".dropdown > ul.dropdown-menu").html($compile(appendThis)(scope));
};

抱歉，如果这让我感到困惑，我也很困惑。但是，如果您有关于从指令内部调用模态的提示，我们将不胜感激。

Answer 1

在搜索了很多帖子后，我找到了答案。我将其张贴在这里以防它可以帮助其他人。

我稍微更改了模板的结构，但功能保持不变。实际问题在于编译模板。当我这样编译它时它起作用了：

$(".dropdown > ul.dropdown-menu").html(appendThis);
$compile($(".dropdown > ul.dropdown-menu").contents())(scope);

从 Angular Treeview 指令调用 Bootstrap Modal 时没有任何反应

Nothing happening when calling Bootstrap Modal from Angular Treeview directive

angularjs

twitter-bootstrap

treeview