$uibModal从windowTemplate调用作用域函数

$uibModal call scope function from windowTemplate

本文关键字：作用域 函数 调用 windowTemplate uibModal      更新时间：2024-03-10

我有一个windowTemplate来包装我的模态。我想要实现的是用自定义功能扩展包装器。我在包装中添加了两个新按钮，一个是关闭按钮，另一个是帮助按钮。关闭按钮使用内置的关闭功能，而帮助应该使用我添加到范围中的功能。

1:windowTemplate（我们将模态放入这个包装器中）

<div modal-render="{{$isRendered}}" tabindex="-1" role="dialog" class="modal"
     modal-animation-class="fade"
     modal-in-class="in" ng-click="($event.target===$event.currentTarget) && close($event)"
     ng-style="{'z-index': 1050 + index*10, display: 'block'}">
  <div class="modal-dialog {{size ? 'modal-' + size : ''}}">
    <div class="modal-content">
      <!-- This is one of the added buttons -> close -->
      <aside><a class="modal-close" ng-click="close($event)"></a></aside>
      <div class="modal-content-body" modal-transclude></div>
      <!-- this is another added item, a pager, works just great -->
      <aside class="modal-pager">#{{$parent.modalId}}</aside>
      <!-- this is the help button, won't call openHelp :( -->
      <aside class="modal-help"><a ng-click="$parent.openHelp($parent.modalId, $event)"></a></aside>
    </div>
  </div>
</div>

2：在通用模式工厂内

    const scope = Object.assign(this.$rootScope.$new(), descriptor.scope || {}, { openHelp: this.openHelp });
    let modalInstance = this.$modal.open({
        ...props,
        ...descriptor,
        scope, // the scope here will contain the modalId and the function (openHelp) I'd like to call from the wrapper
        resolve: {
            ...params
        }
    });

问题是我无法从模板中调用函数。此外，如果我调试我的代码，我会调试ui引导打开方法，它会从我的下推作用域创建一个新的作用域，我可以很好地调用我的函数。如果我调用modalOptions$parent.openHelp（），然后我得到了所需的功能。modalOptions是ui引导程序的内部组件$需要parent，因为（在ui bootstrap tpls.js中）var modalScope = (modalOptions.scope || $rootScope).$new();。有人能帮我吗？：）

回答我自己的问题

Blah我发现了为什么这不起作用。所以TL；博士

<aside class="modal-help"><a ng-click="$parent.openHelp($parent.modalId, $event)"></a></aside>

线路是原因。更准确地说，我将样式规则附加到了模态帮助类中，因为我不小心将该类放在了side标记上，而不是放在了锚点标签上，所以锚点没有维度（没有宽度、没有高度、没有值），所以我怀疑当我点击图标时，事件的目标是side标记，它从那里冒了出来。基本上，我从来没有用点击处理程序点击锚标记。叹气。只需将模态帮助类放在标签上即可。

与此同时，我想出了一个仍然过于棘手的替代解决方案：D

  • 为包装器上最外层的容器添加一个"数据模式标识符"属性，例如为其分配{{$parent.modalId}}值，以确保您能够查询它
  • 在工厂中订阅实例modalInstance.rendered.then(...)的渲染事件
  • 当呈现模态时，搜索包装器的DOM元素：document.querySelector(`div[data-modal-identifier="${scope.modalId}]"`);
  • 如果事件源是我们的帮助图标，则使用事件委派订阅click事件并调用openHelp函数
相关文章：