来自windowTemplate的$ uibModal调用范围函数

I have a windowTemplate to wrap my modals into. What I'd like to achieve is to extend the wrapper with custom functionality. I added two new buttons to the wrapper a close button and a help button. The close button uses the built-in close function while the help should use my function which I added to the scope.

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

1: the windowTemplate (we put our modals into this wrapper)

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: within a general modalFactory

2:在一般的modalFactory中

    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
        }
    });

The problem is that I can't call the function from the template. Moreover if I debug my code, I debug ui-bootstraps open method where it creates a new scope from my pushed-down scope I can call my function just fine. If I call modalOptions.$parent.openHelp() then I get the desired functionality. modalOptions is ui-bootstrap internals. $parent is needed because (in ui-bootstrap-tpls.js) var modalScope = (modalOptions.scope || $rootScope).$new();. Can anyone help me out with this? :)

问题是我无法从模板中调用该函数。此外,如果我调试我的代码,我调试ui-bootstraps open方法,它从我的下推范围创建一个新的范围我可以调用我的函数就好了。如果我调用modalOptions。$ parent.openHelp()然后我得到了所需的功能。 modalOptions是ui-bootstrap内部。需要$ parent,因为(在ui-bootstrap-tpls.js中)var modalScope =(modalOptions.scope || $ rootScope)。$ new();.任何人都可以帮我解决这个问题吗? :)

1 个解决方案

#1

Answering my own question

Blah.. -.- I found out why this wasn't working. So TL;DR

Blah .. -.-我发现了为什么这不起作用。所以TL; DR

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

line was the reason. More precisely I attached style rules to the modal-help class and because I accidentally put the class on the aside tag not on the anchor tag the anchor had no dimensions (no width, no height, no value) so I suspect that when I was clicking on the icon the event's target was the aside tag and it bubbled up from there on. Basically I was never clicking on the anchor tag with the click handler. Sigh'. Just place the modal-help class on the a tag.

线是原因。更确切地说,我将样式规则附加到modal-help类,因为我不小心将类放在了旁边的标签而不是锚标签上,锚没有尺寸(没有宽度,没有高度,没有值)所以我怀疑当我是点击图标,事件的目标是旁边标记,然后从那里冒出来。基本上我从来没有用点击处理程序点击锚标签。叹'。只需将modal-help类放在a标签上即可。

Meanwhile, I was coming up with an alternative solution which is still too hacky :D

与此同时,我想出了另一种解决方案仍然过于苛刻:D

• Add a "data-modal-identifier" attribute to the most outer container on the wrapper, assign e.g {{$parent.modalId}} value to it, just to make sure you will be able to query for it.

将“data-modal-identifier”属性添加到包装器上最外层的容器中,为其分配例如{{$ parent.modalId}}值,以确保您能够查询它。

• In the factory subscribe to the rendered event of the instance modalInstance.rendered.then(...)

在工厂中订阅实例modalInstance.rendered.then(...)的渲染事件

• When the modal was rendered search for the DOM elem of the wrapper: document.querySelector(`div[data-modal-identifier="${scope.modalId}]"`);

当渲染模态时,搜索包装器的DOM元素:document.querySelector(`div [data-modal-identifier =“$ {scope.modalId}]”`);

• With event delegation subscribe for the click event and call the openHelp func if the event source was our help icon.

使用事件委托订阅click事件并调用openHelp func,如果事件源是我们的帮助图标。