Question

这是一个有趣的问题。

我尝试创建指令，禁止原始ng-click操作，显示带问题的模态框并在确认后执行原始操作，类似问题对话框。

问题是我想只对页面上的所有指令实例使用一个模态模板（我不想删除具有完全相同元素的DOM），并且我只想在文档正文中放置一次。使用该解决方案，我有两个范围附加到DOM中的一个元素。几乎一切都有效，它在框中显示正确的问题，但它在每个指令实例上确认后触发操作。

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

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

您可以看到任何操作的确认如何触发第一个和第二个。

使用double $ apply确保，显示正确的框标题和内容值。

如何修复它，所以动作只会被触发一次？我在考虑改变元素的范围，但是找不到这样的选择。

Answer 1

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

scope.modal.modal("show");会为您完成此操作。它是引导程序库的一部分。

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

1 个答案: