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

【问题标题】：Nothing happening when calling Bootstrap Modal from Angular Treeview directive从 Angular Treeview 指令调用 Bootstrap Modal 时没有任何反应
【发布时间】：2015-04-25 15:55:03
【问题描述】：

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

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

我已经尝试了here 和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));
};

对不起，如果这令人困惑，我也很困惑。但是，如果您有关于从指令内部调用模式的提示，我们将不胜感激。

【问题讨论】：

标签： angularjs twitter-bootstrap treeview

【解决方案1】：

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

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

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

【讨论】：