一个指令的两个实例正在使用相同的模板实例

Question

这是一个有趣的问题。

我试图创建指令，它会抑制原始的ng-click操作，显示带有问题的模式框并在确认后执行原始操作，如问题对话框。

问题是我想只为页面上的所有指令实例使用一个模态模板（我不想用完全相同的元素来回收DOM），我只想在文档主体中放置一次。有了这个解决方案，我有两个范围连接到DOM中的一个元素。几乎所有的工作，它显示框上的正确问题，但它会触发确认后，每个指令实例的行动。

下面是抑制原始点击的代码片段，而不是调用显示模式框的内部clickHandler。它还显示了如何将模态元素附加到文档正文并进行编译。

link: function(scope, element) { 
    element 
     .off("click") 
     .bind("click", function(e) { 
     e.stopImmediatePropagation(); 
     scope.$apply(function() { 
      scope.resetValues(); 
     }); 
     scope.populateValues(); 
     scope.$apply(function() { 
      if (scope.clickHandler) scope.clickHandler(); 
     }); 
     }); 

    var modal = $("#myModal"); 
    if (!modal.length) { 
     var templ = $templateCache.get("confirmationModalTemplate.html"); 
     modal = $(templ); 
     $("body").after(modal); 
    } 
    scope.modal = $compile(modal)(scope); 

Here is an example in plunker 。

你可以看到任何动作的确认如何触发第一和第二。

与双$应用技巧，确保适当的框标题和内容值显示。

如何解决它，所以动作只会触发一次？我正在考虑切换元素的范围，但找不到这样的选项。

Answer 1

只需删除该行$("body").after(modal); 您不需要自己附加模态。

scope.modal.modal("show");会为你做这个。它是bootstrap库的一部分。